Vue 响应式原理
来源:互联网 发布:蚂蚁金服 基金知乎 编辑:程序博客网 时间:2024/04/30 19:38
将data与dom绑定的原理
首先引用官网的一张图
要将data与dom绑定,首先要满足一下几点
1、Vue实例内预先定义了data(及时该值为”“也要预先定义)
2、使用Vue.set(object, key, value)或者vm.$set(object, key, value)方法设置了data
因为Vue实例创建的时候,Vue将遍历data内的所有对象并使用 Object.defineProperty 把这些属性全部转为 getter/setter。当data的属性值被改变,会触发对应的setter方法,通知watcher重新计算,所有关联的组件就会被更新。
ps:如果Vue实例内data的对象是个数组,进行添加和删除数组的内容不会触发setter更新组件,因为新旧数据指向同一个地址。此时可以创建一个新的对象重新赋值就能触发。
Vue异步更新队列
Vue 异步执行 DOM 更新需要注意以下几点:
1、当更新数据后,Vue将开启一个队列,并且同一个watcher多次触发,只会进入队列一次。
2、当更新数据后,下一行代码使用vm.$nextTick(function(){}),当更新dom成功后,会执行这个回调函数。
阅读全文
0 0
- vue响应式原理
- Vue 响应式原理
- Vue的响应式原理
- Vue.js响应式原理
- Vue.js响应式原理
- Vue.js响应式原理
- Vue.js深入响应式原理
- Vue.js内部响应式原理探究
- vue 深入响应式原理 注意事项
- vue笔记-----深入响应式原理
- Vue.js 进阶(1) -- 响应式原理
- 【学习笔记】Vue响应式原理
- vue源码--响应式设计原理
- Vue.js解析(一)【Vue.js响应式原理】
- Vue.js学习 Item12 – 内部响应式原理探究
- Vue实现双向绑定的原理以及响应式数据
- Vue基础:响应式
- Vue学习之源码分析--Vue.js响应式原理(一)
- oracle 基本操作
- java8 Comparator
- Spring实例化-Resource leak: 'context' is never closed
- Weec JS Framework(四)
- SonarQube代码质量管理平台安装与使用
- Vue 响应式原理
- 图形数据库简介
- 汉明距离
- HTTP中GET与POST的区别
- NDK相关概念与NDK开发步骤
- js时间戳转正常日期年月日时分秒
- GregorianCalendar类的日历应用
- Mybatise示例的employeeMapping.xml
- X86 架构和 ARM 架构