溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關(guān)Vue2.0/3.0雙向數(shù)據(jù)綁定的實(shí)現(xiàn)原理是什么的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。
Vue是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)復(fù)雜的單頁(yè)應(yīng)用。
雙向數(shù)據(jù)綁定簡(jiǎn)意 即數(shù)據(jù)的改變能讓頁(yè)面重新渲染
Vue2.0 ES5的原理：
Object.defineProperty 對(duì)數(shù)據(jù)進(jìn)行攔截
簡(jiǎn)單小案例
<body> 姓名: <span id="name"></span> <br /> <input type="text" id="inputName" /> </body>
改變input框的值 讓span里面的值隨之改變 數(shù)據(jù)的改變可以讓視圖
<script>
let obj ={
name:''
}
Object.defineProperty(obj,'name',{
get(){
return this.name //注意錯(cuò)誤示范 不可以用this 形成死循環(huán) 要準(zhǔn)備一個(gè)新的值
},
set(val){
}
})
</script>正確寫(xiě)法
<script>
let obj = {
name: ""
};
let newObj = JSON.parse(JSON.stringify(obj));
Object.defineProperty(obj, "name", {
get() {
return newObj.name;
},
set(val) {
if (val === newObj.name) return; //增加判斷優(yōu)化性能 判斷新值與舊值是否一樣 一樣就返回 不一樣的話(huà)的再次賦值
newObj.name = val;
obServer();
}
});
// 重新賦值的方法
function obServer() {
spanName.innerHTML = newObj.name; //獲取obj.name的值
inputName.value = newObj.name;
}
obServer(); //開(kāi)始就執(zhí)行一次
setTimeout(() => {
obj.name = "大左";
}, 1000);
</script>執(zhí)行邏輯
1.setTimeout執(zhí)行1秒后修改數(shù)據(jù) 觸發(fā)obj.name的set（val）
2.拿到最新的值給到newObj.name 執(zhí)行 obServer()方法
3.拿到最新的值賦值 spanName.innerHTML = newObj.name; inputName.value = newObj.name;
input框的值改變 span框的值隨著改變
inputName.oninput = function() {
obj.name = this.value;
};
這個(gè)操作在Vue 里面叫v-model
1.需要對(duì)原始數(shù)據(jù)進(jìn)行克隆 不然死循環(huán) 上面有提到
2.如果我們想給對(duì)象中的數(shù)據(jù)進(jìn)行g(shù)et和set的攔截 就要一個(gè)個(gè)設(shè)置 對(duì)象中的屬性都要單獨(dú)的監(jiān)聽(tīng)一下 如果有多個(gè)就要循環(huán)遍歷了 分別來(lái)監(jiān)聽(tīng)了
反看vue2.0中的data
data（）{
return{
obj：{}
}
}
this.obj.name='XXX' //這個(gè)操作行不通 因?yàn)閯傞_(kāi)始的時(shí)候obj里面沒(méi)有name所以就沒(méi)有進(jìn)行監(jiān)聽(tīng) 都是以上第二條造成的ok 那我們?cè)倏匆幌?/p>
主要用到了SE6里面的proxy
<script>
let obj = {};
obj = new Proxy(obj, {
get(target, prop) {
console.log("D");
return target[prop];
},
set(target, prop, value) {
console.log("Z");
target[prop] = value;
}
}); //監(jiān)聽(tīng)整個(gè)對(duì)象 不需要指定屬性 相當(dāng)于把對(duì)象里所有的屬性都監(jiān)聽(tīng)了 So 直接寫(xiě)整體的set get
</script>1.獲取obj.name 觸發(fā)get 這里沒(méi)有name 但是可以走 因?yàn)闆](méi)有值所以返回undefine
2. 設(shè)置給name值看一下 觸發(fā)set
3.再次獲取obj.name看看有沒(méi)有值
So 不管你現(xiàn)在對(duì)象里有沒(méi)有某個(gè)屬性 因?yàn)檫@里監(jiān)聽(tīng)的是整個(gè)對(duì)象 對(duì)象里面未來(lái)有的都有了 彌補(bǔ)2.0不足之處
1.不需要clone
2.也不需要給每一個(gè)對(duì)象里面的屬性單獨(dú)設(shè)置 給整體對(duì)象設(shè)置就ok了 干凈又衛(wèi)生啊
再次實(shí)現(xiàn)上面2.0的操作
<script>
let obj = {};
obj = new Proxy(obj, {
get(target, prop) {
console.log("D");
return target[prop];
},
set(target, prop, value) {
console.log("Z");
target[prop] = value;
obServer();
}
}); //監(jiān)聽(tīng)整個(gè)對(duì)象 不需要指定屬性 相當(dāng)于把對(duì)象里所有的屬性都監(jiān)聽(tīng)了 So 直接寫(xiě)整體的set get
// 重新賦值的方法
function obServer() {
spanName.innerHTML = obj.name; //獲取obj.name的值
inputName.value = obj.name;
}
obServer(); //開(kāi)始就執(zhí)行一次
setTimeout(() => {
obj.name = "大左";
}, 1000);
inputName.oninput = function() {
obj.name = this.value;
};
</script>
感謝各位的閱讀！關(guān)于“Vue2.0/3.0雙向數(shù)據(jù)綁定的實(shí)現(xiàn)原理是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼