vue的数据响应式总结

464 阅读2分钟

1.数据响应式

Vue.js 一个核心思想是数据驱动。所谓数据驱动,是指视图是由数据驱动生成的,我们对视图的修改,不会直接操作 DOM,而是通过修改数据。——《Vue.js 技术揭秘》

在没有数据响应之前,我们从服务端提供过的接口获取到数据要渲染在 html 页面上时,抑或是需要获取表单的值进行计算回显到页面上时,都需要建立很多 DOM 事件监听器,并进行许多的 DOM 操作。

2.数据响应式的中心思想

这张图向我们展示了vue的数据响应式的中心思想。

  • 黄色部分指的是Vue的渲染方法,视图初始化和视图更新时都会调用vm._render方法进行重新渲染。渲染时又不可避免的会touch到每个需要展示到视图上的数据(紫色部分),触发这些数据的get方法从而收集到本次渲染的所有依赖,收集依赖和更新派发都是基于蓝色部分的watcher观察者。

  • 当我们在修改这些收集到依赖的数据时,会触发数据中的 set 属性方法,该方法会修改数据的值并 notify 到依赖到它的观察者,从而触发视图的重新渲染。绿色部分是渲染过程中生成的 Virtual DOM Tree,这棵树不仅关系到视图渲染,更是 Vue 优化视图更新过程的基础。

  • 简言之,数据响应式的中心思想,是通过重写数据的 get set属性方法,让数据在被渲染时把所有用到自己的订阅者存放在自己的订阅者列表中,当数据发生变化时将该变化通知到所有订阅了自己的订阅者,达到重新渲染的目的。

3.响应式原理的核心

Vue遍历data的所有属性,并使用Object.defineProperty把这些属性转化为getter和setter,每个组件实例都有相应的watcher实例对象。它会在组件渲染的过程中把属性记录为依赖,之后依赖项的setter被调用时,会通知watcher重新计算,从而致使它关联的组件得以更新。

4.依赖收集

依赖收集的原理是:当视图被渲染时,会触发渲染中所使用到的数据的 get 属性方法,通过 get 方法进行依赖收集。

5.派发更新

当我们修改一个存在 data 属性上的值时,会触发数据中的 set 属性方法,首先会判断并修改该属性数据的值,并触发自身的 dep.notify 方法开始更新派发。

参考文献

Vue 的数据响应式原理