Vue.js Instance Properties & Reactivity

๐Ÿ’ก Vue.js Instance Properties & Reactivity โ€” Executive Summary

Technical architectural analysis, practical configuration manifests, and deployment instructions for Vue.js Instance Properties & Reactivity.

์ „์—ญ ๋ณ€์ˆ˜
\$parent
  • ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ
\$refs[โ€™refernameโ€™]
  • ์„ ์–ธ๋œ child ์ปดํฌ๋„ŒํŠธ map Object
  • ๋ถ€๋ชจ์ปดํฌ๋„ŒํŠธ ๋‚ด์— ์„ ์–ธ
  • \
์ „์—ญ ๋ฉ”์„œ๋“œ
\$set(obj, index or key, value)
sql
## ๋ณ€๊ฒฝ๊ฐ์ง€ ํ™œ์„ฑํ™”

### ์˜ค๋ธŒ์ ํŠธ
var vm = new Vue({
  data: {
    someObject: {
			a: 1
		}
  }
});
// `vm.someObject.a` ๋Š” ์ด์ œ ๋ฐ˜์‘ํ˜•์ž…๋‹ˆ๋‹ค.

vm.someObject.b = 2;
// `vm.someObject.b` ๋Š” ๋ฐ˜์‘ํ˜•์ด ์•„๋‹™๋‹ˆ๋‹ค.

// ์•„๋ž˜์˜ ๋ฐฉ์‹์œผ๋กœ ๋ฐ˜์‘ํ˜•์œผ๋กœ ์ดˆ๊ธฐํ™” ๊ฐ€๋Šฅ
Vue.set(vm.someObject, 'b', 2);
vm.$set(vm.someObject, 'b', 2);
this.$set(vm.someObject, 'b', 2);

### ๋ฐฐ์—ด
var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
});
vm.items[1] = 'x'; // ๋ฐ˜์‘ํ˜•์ด ์•„๋‹™๋‹ˆ๋‹ค
vm.items.length = 2; // ๋ฐ˜์‘ํ˜•์ด ์•„๋‹™๋‹ˆ๋‹ค

// ์•„๋ž˜์˜ ๋ฐฉ์‹์œผ๋กœ ๋ฐ˜์‘ํ˜•์œผ๋กœ ์ดˆ๊ธฐํ™” ๊ฐ€๋Šฅ
Vue.set(vm.items, indexOfItem, newValue);
vm.$set(vm.items, indexOfItem, newValue);
this.$set(this.items, indexOfItem, newValue);

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *