码迷,mamicode.com
首页 > 其他好文 > 详细

Vue 响应式属性

时间:2018-04-24 17:34:48      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:react   数据   实例化   响应   product   div   16px   生命周期   car   

本文参考自:https://www.w3cplus.com/vue/vue-reactivity-and-pitfalls.html

1、概述

当创建一个Vue实例时,每个数据属性、组件属性等都是可以遍历的,并为每个数据属性添加了gettersettergettersetter允许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);

 

Vue 响应式属性

标签:react   数据   实例化   响应   product   div   16px   生命周期   car   

原文地址:https://www.cnblogs.com/mengfangui/p/8930945.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!