茶余饭后聊聊 Vue3.0 响应式数据那些事儿

那么 Vue3.0 怎么又走回头路去实现了数组的全面监听了呢?答案就是 Proxy 和 Reflet 这一对原生 CP 的出现，Vue3.0 使用 Proxy 作为响应式数据实现的核心，用 Proxy 返回一个代理对象，通过代理对象来收集依赖和触发更新。大概的原理像这段代码一样：

const arr = ["2019","云","栖","音","乐","节"]; 
let ProxyArray = new Proxy(arr,{ 
    get:function(target, name, value, receiver) { 
        console.log("取值") 
        return Reflect.get(target,name); 
    }, 
    set: function(target, name, value, receiver) { 
       console.log("赋值") 
       Reflect.set(target,name, value, receiver);; 
    } 
 }) 
 const index = ProxyArray[0]; 
 //取值 
 ProxyArray[0]="2050" 
 //赋值 

效果和 Object.defineProperty 一样一样的，又显得清新脱俗有没有?而且 Proxy 只要是对象都能代理，后面还会提到。当然 Vue3.0 是虽然有了新欢，但也没忘记旧爱，对于在之前版本中数组的几种方法的监听还是照样支持的。

惰性监听

什么是"惰性监听"?

简单讲就是"偷懒"，开发者可以选择性的生成可观察对象。在平时的开发中常有这样的场景，一些页面上的数据在页面的整个生命周期中是不会变化的，这时这部分数据不需要具备响应式能力，这在 Vue3.0 以前是没有选择余地的，所有在模板中使用到的数据都需要在 data 中定义，组件实例在初始化的时候会将 data 整个对象变为可观察对象。

惰性监听有什么好处?

• 提高了组件实例初始化速度

（编辑：PHP编程网 - 湛江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!