當前位置：首頁 > 前端技术 > vue >内容正文

vue

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

發布時間：2023/12/10 vue 38 豆豆

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

初識:

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

封裝:

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

// 首先創建一個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;}}) }

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

数据
Vue

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

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

vue

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

初識:

封裝:

引用Lz類

淺拷貝

總結