vue2和vue3响应式原理区别?

1.v2的响应式原理:对象类型通过Object.defineProperty() 对属性进行读取、修改进行拦截(也称之为数据劫持),对数组类型,通过重写更新数组的一些列方法实现拦截。

vue2 中的响应式数据都是在data字段进行定义的,通过return进行返回


    存在问题:新增属性或删除属性界面不会更新,需要使用this.$set this.$delete等强制更新的方法,直接修改数组的下标 界面也是不会更新的


    优点:基于es5的,支持大部分的浏览器

    缺点:由于对象是通过递归实现监听,如果说数据过长,数据层级过多,导致初始化的时候时间过长,不支持数组的监听,对象新增key也是无法监听,通过数组下标进行访问,也无法触发响应式。


 2. v3响应式

    基本数据类型通过ref实现响应式,引用数据类型通过reactive实现响应式,可以拦截对象中任意操作的变化,包括属性的读写、属性添加、属性删除,以及数组下标的修改。

定义响应式数据在setup里面进行定义的 必须通过return进行返回,只能通过ref或者reactive这两个函数创建出来才是响应式数据

    优点:速度快 不用初始化的时候使用深度递归。可以检查到代理属性动态的添加和删除,也可以检查到数组下标和length属性的改变。

    缺点:es6新增方法api 对一些低版本浏览器不支持。如IE11

你可能感兴趣的:(javascript,开发语言,ecmascript)