vue强制更新视图_Vue原理分析

一 数据驱动视图

传统组件只是静态渲染，更新还要依赖于操作DOM

vue数据驱动视图 - MVVM

React数据驱动视图 - setState

js对象通过指令修改dom的视图，而dom通过dom事件监听等方式来修改vue内部js对象

二 Vue响应式

组件data的数据一旦变化，立刻触发视图的更新。这是数据驱动的第一步。

Object.defineProperty Vue响应式核心API

Object.defineProperty缺点(需要其他实现方式):

1. 深度监听需要递归到底，一次性计算量大。
2. 无法监听新增属性/删除属性。(Vue.set, Vue.delete)。
3. 无法原生监听数组，需要特殊处理。

三 虚拟DOM(Virtual DOM) 和 diff

vdom是实现vue和react的重要基石, diff是vdom最核心，最关键的部分。

DOM操作本身非常耗费性能,以前的jquery可以自行操作dom的时机，手动调整。

Vue和React是数据驱动视图，解决方案就是vdom

把复杂的计算更多的转移到js，因为js执行速度很快，用js模拟dom，计算出更小的变更操作dom。

下图解释了如何模拟操作dom

这里推荐snabbdom库，简洁强大，易学易用，vue参考它实现了vdom和diff算法(树diff算法时间复杂度o(n的三次方))