您的位置:首页 > Web前端 > Vue.js

Vue基础总结系列文章第三篇---响应式数据更新

2019-04-15 10:33 337 查看

Vue是MVVM框架,数据的更新会触发模板的更新。核心是通过Object.defineProperty来实现的。但是具体的要点还有这些:

1.数据来源:来自父组件的props,自身的状态data,还有公共状态vuex等。这些的改变都可能触发视图的更新。

2.数据只有在初始化的时候,模板有用到的,才会被放入watcher里面,后期 修改才会触发视图更新,否则不会。

3.data只有放在return里面才能触发数据更新:

此处的c虽然在模板中有用到,但是没有放在return里面,所以修改后并不会触发数据更新

4.数据如果是对象的话,初始化对象没有某个属性,后面增加了某个属性,这样不会触发模板更新。如果要触发,可以用set方法,或者预期知道某个属性,但是可以设置为undefined.

此处有个例外:如果数据是数组,对数组进行push操作,依然可以触发视图更新。

参考代码:

https://github.com/ssxsite/vue2-webpack_update/blob/master/practice/component/PropsAndData.vue

源码参考文章:

https://funteas.com/topic/5a809f5847dc830a0e4690c2

 

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: