1、API响应式区别
vue2.0的响应式是基于数据劫持(object.defineProperty)API
去劫持数据的getter
和setter
,具体是这样的:
Object.defineProperty(data, 'a',{
get(){
// track
},
set(){
// trigger
}
})
Vue.js 3.0
使用了Proxy API
做数据劫持
observed = new Proxy(data, {
get() {
// track
},
set() {
// trigger
}
})
object.defineProperty的缺陷,它必须预先知道要拦截的key
是什么,所以它并不能检测对象属性的添加和删除。尽管Vue.js
为了解决这个问题提供了$set
和$delete
实例方法,来优化vue2.0API的缺陷 object.defineProperty。
Proxy API
并不能监听到内部深层次的对象变化,因此 Vue.js 3.0 的处理方式是在getter
中去递归响应式,这样的好处是真正访问到的内部对象才会变成响应式,而不是无脑递归,这样无疑也在很大程度上提升了性能。
2.底层的区别
vue3.0的底层全部都是使用ts(typeScript) 编写;编码期间做类型检查,避免一些应为类型问题导致的错误有利于它去定义接口的类型,利于IDE对变量类型的推导
3.属性声明方式的区别
2.0中都是使用vue属性的方式来创建数据、方法、计算属性等内容
3.0中变成了 api方式进行创建,也就是vue3.0把变量 、方法、 计算属性等内容封装成了一个个的方法,使用方法的方式进行调用.