2022-08-27 vue2常见原理分析

总领

1：vue的mvvm原理

m:model数据模型层   v:view视图层  vm:ViewModel

MVVM让视图与viewmodel直接的关系特别的紧密，就是为了解决mvc反馈不及时的问题  

双向数据绑定 和 ajax/json的数据绑定。

 mvvm与mvc最大的区别：

MVVM实现了view与model的自动同步，也就是model属性改变的时候， 我们不需要再自己手动操作dom元素去改变view的显示，而是改变属性后该属性对应的view层会自动改变。

2： 双向数据的绑定原理

        Object.defineProperty的缺点

            1：深度监听需要递归到底，一次性计算量大

            2：无法监听新增属性、删除属性（要使用Vue.set  Vue.delete）

            3：无法原生监听数组，需要特殊处理

         双向数据绑定原理

3： observer/deper/watcher

详情可见

4：vue的模板编译

                解析阶段：将“HTML”模板解析成AST语法树；

                优化阶段：从AST语法树中找出静态子树并进行标记（被标记的静态子树在虚拟dom比对时会被忽略，从而  提高虚拟dom比对的性能）；

                  代码生成阶段：通过AST生成代码字符串，并最终生成render函数。

详情

5：diff算法

详情