vue --- 2.0數據的響應式的一種實現

初識:

實際上是通過Object.defineProperty()方法來實現的
talk is cheap, show your code

let obj = {};
Object.defineProperty(obj, 'name', {get(){return document.querySelector('#name').innerHTML;},set(newVal){document.querySelector('#name').innerHTML = val;}
})// 注1: 以上代碼,將dom中id為name的值與obj.name屬性綁定.
// 注2: 當在js文件中調用obj.name時,會觸發obj的get函數(返回html內容)
// 注3: 當調用obj.name = xxx 時,會調用 obj 的set方法

封裝:

知道了基本原理后,下一步是要將其封裝起來!

// 首先創建一個Lz類.
class Lz{constructor(options){// 將傳入的數據保存this.$options = options;// 數據響應化this.$data = options.data;this.observe(this.$data);}// 說明:// 將數據保存到this.$data中// observe函數用于給每一個數據添加set和get方法observe(value){if(!value || typeof value !== 'object'){return;}// 遍歷該對象Object.keys(value).forEach(key =>{this.defineReactive(value, key, value[key])})}// 給數據添加響應式defineReactive(obj, key, val){Object.defineProperty(obj, key,{get(){return val},set(newVal){if(val === newVal) return;// 處理更新事件,此處使用console.log實現console.log(`數據更新辣: ${val} --- > ${newVal}`);val = newVal;}})}
}

引用Lz類

在html中通過script標簽導入Lz類

<body><div id="app"></div><script src="./lz.js"></script><script>const app = new Lz({el:'#app',data:{foo:'bar',hello:{world:'您好,世界'}}})</script>
</body>

打開瀏覽器,在控制臺輸入app.$data.foo
嘗試改變app.$data.foo的值
嘗試改變app.$data.hello.world的值

淺拷貝

以上,對第一個屬性foo的操作成功的觸發了set函數.
由于淺拷貝復制的是引用,我們對對象的修改無法觸發set.
簡單的理解就是set只負責監聽自己這一層的變化,下一層的變化.不予監聽
解決辦法,使用遞歸.給每一層添加一個setter方法.代碼如下
只需在defineReactive里面對world對象設置set和get
重寫defineReactive方法

defineReactive(obj, key, val){// 解決淺拷貝問題this.observe(val);Object.defineProperty(obj, key, {get(){return val;},set(newVal){if(newVal === val){return;}console.log(`${key}屬性更新: ${val} --- > ${newVal}`);val = newVal;}})
}

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/250625.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/250625.shtml
英文地址，請注明出處：http://en.pswp.cn/news/250625.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！