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
相关文章推荐
- Vue基础总结系列文章第四篇---computed和watch的区别
- 谈谈对vue响应式数据更新的误解
- Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
- PHP基础知识总结系列文章归档
- vue之table初始化后修改单条数据视图不更新的问题总结
- WebApi学习总结系列第三篇(Http)此篇持续更新...
- IBatisNet 开发指南系列文章更新
- C语言基础知识总结(1)-基本数据类型
- 微软Expression Blend基础教程系列 - Blend基础-数据绑定
- IBatisNet 开发指南系列文章更新
- 姚编辑看教材系列文章之二 数据挖掘与机器学习
- Asp.Net 开发之(1) ---如何自动加载数据到页面或更新数据到数据容器中(基础控件)
- Net设计模式实例系列文章总结[转]
- Enterprise Library系列文章回顾与总结
- Enterprise Library系列文章回顾与总结
- Scott的ASP.net MVC框架系列文章之三: 视图数据的传递
- C#基础系列(4)-- 第一部分 基础数据类型与操作 -- 枚举类型与位标志(4)
- JVM基础概念总结:数据类型、堆与栈
- Net设计模式实例系列文章总结 推荐
- (转)Enterprise Library系列文章回顾与总结