咱们晓得Vue是一个MVVM框架,它一个核心思想就是数据驱动。数据驱动就是指视图是由数据驱动生成的,咱们若想让视图扭转,要通过批改数据来进行批改,而不是像原始 JS那样间接操作DOM。
响应式?
首先理解一下Vue是如何实现数据驱动的,这是一幅Vue官网的配图。
- 黄色那一块是Vue负责渲染的
render function
,当视图初始化以及视图更新时都会调用这个render function
。 - 而每次渲染时都会无奈防止地触碰到咱们的数据,也就是图中紫色的
data
局部。渲染时通过触发波及数据的getter
,把波及数据作为依赖收集到watcher
中。(而且这个watcher
在每个组件实例中都会对应有一个) - 所以在前面咱们批改这些收集到的依赖数据时,就会触发数据的
setter
。setter
办法会批改数据的值并告诉(notify
)给watcher
,最初watcher
再触发render funnction
进行视图的从新渲染。
下面说的就是Vue实现数据驱动的过程,能够看进去实现数据驱动的要害是让咱们的数据变成响应式,而getter
和setter
这两个办法又是让数据变成响应式的要害。
然而咱们写在data
中的原始数据并没有对应性能的getter
和setter
啊?其实这就是Vue的工作:重写数据的getter
和setter
。
Vue2
那么Vue是怎么实现数据的响应式的?首先咱们来看一下Vue2的实现原理。