vue dom diff,virtual dom diff算法

　　本文主要详细介绍Vue的虚拟DOM和diff算法。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。

目录

　　什么是虚拟DOM？为什么需要虚拟DOM？摘要在vue 中

　　数据更改-虚拟DOM(计算更改)-操作DOM-视图更新

　　虚拟DOM: JS执行速度更快。

什么是虚拟DOM？

　　用JS模拟DOM结构

为什么需要虚拟DOM？

　　vue中的数据驱动视图需要有效的方法来控制DOM操作的数量。

　　diff算法:虚拟DOM的核心

　　补丁功能

　　两个使用场景：

　　第一次渲染时，判断第一个参数是否是真实的dom元素，如果是，创建一个空的vnode并关联一个DOM元素，然后比较patch函数传入的第一个参数和第二个参数是否是同一个vnode。如果是同一个vnode，直接给vnode打补丁更新。如果是不同的VNode，创建一个新的DOM元素，插入它，然后删除旧的。

　　patchVnode函数：

　　updateChildren函数：

　　DOM Diff

　　比较两个虚拟节点，找出它们的区别，然后给真实的DOM节点打补丁。

　　目的:以最小的代价修改DOM

　　虚拟节点:用对象表示真实的DOM。

　　定义属性和代理之间的区别：

　　性质不同，所以用途不同。

　　defineProperty的本质是给对象添加属性，所以当数组的长度被修改，数组的值被index设置时，数组的push()和pop()不能被触发。

　　defineProperty中集合的。所以Vue2是用一些自己定义的数组方法来实现的。

　　代理没有这个缺点。

　　Vue2之所以不用proxy，是因为Proxy属于ES6，当时考虑的是兼容性。

　　Reflect反映内置对象方法集合的容器。

　　Reflect 的好处：

　　以前很多方法都是挂在Object上的，很混乱。

　　以后很多方法会逐渐放到Reflect上，成为内置方法的容器，统一管理各类方法。

　　Reflect.has(obj， a) //函数式编程。

　　比较obj中的a

　　Object中的一些方法会直接抛出异常，需要包装try catch。

　　Reflect中的方法一般都有返回值，失败后会合理返回。

　　proxyhandler和Reflect Proxy中的方法是一一对应的。

　　Reflect是ES6中的一个全局内置对象。直接保存的静态方法，不需要实例化，可以直接使用。

总结

　　本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。