标签:react 数据 实例化 响应 product div 16px 生命周期 car
本文参考自:https://www.w3cplus.com/vue/vue-reactivity-and-pitfalls.html
1、概述
当创建一个Vue实例时,每个数据属性、组件属性等都是可以遍历的,并为每个数据属性添加了getter
和setter
。getter
和setter
允许Vue观察数据的更改并触发更新。
如果你在Vue实例化后添加(或删除)一个属性(例如在方法或生命周期钩子中),Vue是不知道它的。
2、更新响应式对象
使用Vue.set
设置一个新的对象属性。该方法确保将属性创建为一个响应式属性,并触发视图更新。
function addToCart(id) {
var item = this.cart.findById(id);
if(item) {
item.qty++
} else {
// 不要直接添加一个属性,比如 item.qty = 1
// 使用Vue.set 创建一个响应式属性
Vue.set(item, ‘qty‘, 1)
this.cart.push(item)
}
}
addToCart(myProduct.id);
标签:react 数据 实例化 响应 product div 16px 生命周期 car
原文地址:https://www.cnblogs.com/mengfangui/p/8930945.html