首先,Vue是声明式渲染
vue
Vue2.0渲染层做了根本性的改动,那就是引入了虚拟DOM
编译模板——渲染函数——(调用返回虚拟DOM)——通过patch函数的作用,负责将这些虚拟DOM真正的渲染到真实的DOM中
vue的响应式系统可以检测到数据的改动,一旦数据的改动就需要重新进行渲染,生成新的树,然后与旧的树相比较,就可以得出哪些做了改变,最后通过patch函数施加改动
这样做的主要原因:JavaScript的运算在现代引擎中相当快,但是DOM本身是非常缓慢的
依赖追踪
个人觉得面试被问到双向数据绑定也可以这样回答
通过es5中的Object.defineProperty
方法实现的
vue会遍历这个对象的每个属性,每一个属性会被转换为一个 getter 和一个 setter。同时每个组件会有一个对应的 watcher 对象,这个对象的职责就是在当前组件被渲染的时候,记录数据上面的哪些属性被用到了。
例如,在渲染函数里面用到A.B的时候,这个就会触发对应的 getter。整个渲染流程具体要点如下:
- 当某个数据属性被用到时,触发 getter,这个属性就会被作为依赖被 watcher 记录下来。
- 整个函数被渲染完的时候,每一个被用到的数据属性都会被记录。
- 相应的数据变动时,例如给它一个新的值,就会触发 setter,通知数据对象对应数据有变化。
- 此时会通知对应的组件,其数据依赖有所改动,需要重新渲染。
- 对应的组件再次调动渲染函数,生成 Virtual DOM,实现 DOM 更新。
依赖追踪