WishMeLz

生活其实很有趣

Vue双向绑定原理

利用Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现

在Vue3.0中使用Proxy替换Object.defineProperty

  1. Object.defineProperty 无法监控到数组下标的变化,导致直接通过数组的下标给数组设置值,不能实时响应
  2. Object.defineProperty只能劫持对象的属性,需要每个属性每个对象进行遍历。在2.x中,是通过递归和遍历data对象来实现数据监控。如果能直接劫持一个完整的对象更好
  3. Proxy可以劫持整个对象,但是Proxy是ES6的行特性,兼容不好

劫持对象的get和set属性,对对象赋值的过程中使用diff算法找出不同,渲染dom

Vue组件加载时会解析template模板中的代码生成一个虚拟DOM对象,保存到内存中。每当函数发送改变时,就会重新解析template中的模板生成新的虚拟DOM对象,然后使用dff算法来对比新的DOM树和原DOM树的区别,找出不同点。然后通过DOM操作来只更新不同的DOM元素。