溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
研究過程
一般形式
data:{ n:0 } ：以這樣的方式存儲數據，vue能夠監聽其變化嗎？顯然是不能的。
使用Obj.defineProperty
let data1 = {}
Object.defineProperty(data1, 'n', {
value: 0
})
為什么要使用defineProperty呢？這不是把一般形式復雜化了嗎？
引出主角getter setter。
如果我們想對數據監聽進行處理呢？（假設修改的數據必須>=0）
let data2 = {}
data2._n = 0
Object.defineProperty(data2,'n',{
get(){ return this._n },
set(value){
if(value<0) return //在此處可以對數據的修改進行操作
this._n = value
}
})
使用代理
如果對方直接修改data2._n怎么辦？我們讓data2變成匿名對象！
let data3 = proxy({ data:{n:0} }) //括號里是匿名對象，無法訪問
function proxy({data}){
const obj = {}
Object.defineProperty(obj, 'n', {
get(){
return data.n
},
set(value){
if(value<0)return
data.n = value
}
})
return obj // obj 就是代理
}
代理是什么？
如果用戶自己給匿名對象起了個名字怎么辦呢？
MyData = { n:0 }
let data3 = proxy({ data:MyData })
MyData.n = -1
//成功賦值為-1
這種情況，我們也要進行攔截處理。
//在4.中的proxy函數中加入這幾行
let value = data.n
Object.defineProperty(data, 'n', {
get(){
return value
},
set(newValue){
if(newValue<0)return
value = newValue
}
})
這樣，我們就對data進行了監聽。
data域的一個bug
new Vue({
data:{
obj:{
a:0
}
},
template:`
<div @click="set">{{ obj.b }}</div>
`,
methods:{
set(){
this.obj.b = 1
}
}
})
//bug：vue無法監聽一開始data域中不存在的obj.b
解決方法：
data的初始化中加入b
data:{
obj:{
a:0,
b:undefined
//注意，vue中的null和undefined都不會被渲染出來
}
}
使用Vue.set(this.obj,'b',1)
數組的長度又不固定，怎么提前聲明？
詳見vue文檔，變異方法 章節
總結
//看看下面的代碼，發現了什么？
let data = proxy({ data:myData5 })
let vm = new Vue({ data: myData })
Vue正是使用了這種代理和監聽的設計模式，形成的數據響應式。
流程：聲明數據 => 監聽數據 => 代理數據 => 返回數據
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
