溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
簡介：
Vue 最獨特的特性之一，是其非侵入性的響應式系統。數據模型僅僅是普通的 JavaScript 對象。而當你修改它們時，視圖會進行更新。簡單的說，就是數據變視圖變。
當你把一個普通的 JavaScript 對象傳給 Vue 實例的 data 選項，Vue 將遍歷此對象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉為 getter/setter。Object.defineProperty 是 ES5 中一個無法 shim 的特性，這也就是為什么 Vue 不支持 IE8 以及更低版本瀏覽器。
下例為模擬，Vue數據雙向綁定底層實現原理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>數據雙向綁定底層實現</title>
</head>
<body>
<button onclick="changeTest()">點我改變</button>
<div id="test">哈哈哈</div>
<script>
let test={};
let middle='';
Object.defineProperty(test,'name',{
set(val){
console.log('觸發setter');//設置、修改時觸發set
middle=val;
watcher();
},
get(){
console.log('觸發geter');//獲取、使用時觸發get
return middle;
}
})
function changeTest(){
test.name="變變變";//觸發setter
}
function watcher(){
document.getElementById('test').innerHTML=test.name;//觸發get
}
</script>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
