vue2响应式原理总结

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue2响应式原理总结相关的知识,希望对你有一定的参考价值。

参考技术A

vue组件实例化时,会对data属性深度遍历(遇到数组或者对象)为每一个属性添加数据劫持。数据劫持就是使用Object.defineProperty(de fai in pro pu tei)方法添加get/set方法。
在这个过程中会实例化一个Dep类。
1.在get拦截器里触发dep实例的depend方法,进行依赖收集,实质是在dep的实例属性sub数组中添加依赖这个属性的watcher实例。
2.在set拦截器里触发dep实例的notify方法,对收集到的所有依赖派发更新,(watcher的update方法)

vue组件实例化时会实例化一个渲染watcher,渲染watcher实例化过程会做两件事情。
1.创建vnode,在这个过程中,访问了data属性,触发了get方法,完成了依赖收集。
2.触发了子组件的实例化,子组件实例化又会重复上述数据劫持的过程。
这个过程就是对组件树的深度遍历。

结合组件生命周期来看整个过程,父组件会先触发created钩子,子组件后触发created钩子。而子组件mouted钩子会先执行,父组件的mouted钩子后执行。

分步骤记忆
1、实现页面不刷新的原理
2、页面视图刷新的原理

实现页面不刷新
1.hash
2.history
3.abstract:支持所有 JavaScript 运行环境,如 Node.js 服务器端。如果发现没有浏览器的 API,路由会自动强制进入这个模式。

1.hash(哈希模式),#符号后边是浏览器行为,在改变的时候不对页面进行刷新(重新请求URL)(监听hashChange事件)
2.history模式,H5新增了pushState,replaceState连个新API,可以修改历史记录却不会使浏览器刷新页面。

视图更新原理
其原理就是vue的响应式更新dom的原理,m => v
m是数据,也就是在vue-router install时在根组件(root vue component)添加了_route属性,在匹配到对应路由后更新了_route属性值,继而触发了该属性值的渲染watcher,在继而触发dom更新。

两种模式的不同
1.部署时,history模式需要服务端处理所有可能的路径(例如配置nginx的配置文件),防止出现404。哈希模式则不需要。
2.URL表示不同。

v-model指令就是 v-bind:value 和 @input 的语法糖。
它即可以支持原生表单元素,也可以支持自定义组件
在自定义组件中其实际是这样的:

它的实现通过自定义render函数, 缓存了 vnode

Vue 在更新 DOM 时是异步执行的,只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。

如果同一个 watcher 被多次触发,只会被推入到队列中一次。在缓冲时会去除重复数据避免不必要的计算和 DOM 操作。

$nextTick(cb) 目的是在DOM 更新完成后传入的回调函数再被调用。

以上是关于vue2响应式原理总结的主要内容,如果未能解决你的问题,请参考以下文章

vue2数据响应式原理

vue2.0和3.0的响应式原理以及区别

Vue2/Vue3 响应式原理

vue2与vue3响应式原理

vue2响应式原理

vue2源码学习-响应式原理