當(dāng)前位置：首頁(yè) > 前端技术 > vue >内容正文

vue

vue --- 2.0数据的响应式的一种实现

發(fā)布時(shí)間：2023/12/10 vue 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue --- 2.0数据的响应式的一种实现小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

初識(shí):

實(shí)際上是通過(guò)Object.defineProperty()方法來(lái)實(shí)現(xiàn)的
talk is cheap, show your code

封裝:

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

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

引用Lz類

在html中通過(guò)script標(biāo)簽導(dǎo)入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>

打開(kāi)瀏覽器,在控制臺(tái)輸入app.$data.foo
嘗試改變app.$data.foo的值
嘗試改變app.$data.hello.world的值

淺拷貝

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

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

總結(jié)

以上是生活随笔為你收集整理的vue --- 2.0数据的响应式的一种实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

数据
Vue

上一篇：跨域问题及CORS机制
下一篇： vue --- 2.0响应式补充