vue3.0 中为什么要使用 Proxy

最新推荐文章于 2024-02-27 08:15:00 发布

文摘资讯

最新推荐文章于 2024-02-27 08:15:00 发布

阅读量320

点赞数

文章标签： vue.js javascript 前端 ecmascript 前端框架

版权

可以提高实例初始化启动速度，优化数据响应式系统，由全部监听改为惰性监听（lazy by default)。

const obj = reactive({
  name: '1',
  children: { name: '2' }
})

例如这种 reactive 只对obj的第一层的对象进行代理，第二层children并不是响应式。

当你obj.children获取的时候，再进行第二层代理。而不是初始化的时候直接给所有层进行代理。而在vue2中，是直接在原始数据上进行递归代理的。

数据响应式系统全语言特性支持，添加数组索引修改监听，对象的属性增加和删除。

Vue2 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。例如：

var vm = new Vue({
  data:{
    a:1
  }
})


// `vm.a` 是响应式的


vm.b = 2
// `vm.b` 是非响应式的

对于已经创建的实例，Vue2 不允许动态添加根级别的响应式 property。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。例如，对于：

Vue.set(vm.someObject, 'b', 2)

对于数组，Vue2 不能检测以下数组的变动：

1、当你利用索引直接设置一个数组项时，例如：

vm.items[indexOfItem] = newValue

2、当你修改数组的长度时，例如：

vm.items.length = newLength

为了解决第一类问题，以下两种方式都可以：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

为了解决第二类问题，你可以使用 splice：

vm.items.splice(newLength)

这些问题在 Vue3 中都不存在了，使用 Proxy 代理这些都支持了。

Vue2.x 通过给每个对象添加getter setter属性去改变对象,实现对数据的观测,Vue3.x 通过 Proxy 代理目标对象,且一开始只代理最外层对象,嵌套对象lazy by default ,性能会更好

支持数组索引修改,对象属性的增加,删除。

关注