包含：選擇器屬性、閉包、遍歷物件、虛擬dom樹、觀察者模式、object.defineproperties()方法改造data中的變數、遞迴、匿名函式等
**（具體看注釋）：
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
head
>
>
>
welecomeh1
>
>
積分：>
}span
>
h2>
>
使用者名稱：>
}span
>
h2>
>
積分：>
}span
>
h2>
>
var data =
//vue第一步：改造data
//es5新函式：object.keys(obj) 獲取obj物件中的所有屬性名的列表
//獲得data物件中所有變數名（屬性名）
var keys = object.
keys
(data)
; console.
log(keys)
;//遍歷data中每個屬性
for(
var key of keys)
` //錯誤：在定義物件時，屬性名禁止使用反引號
//"_"+key //錯誤：在定義物件時，屬性名禁止拼接
[`_`
+key]:,
[key]:`
];//return this["_uname"]},
set(value)`]
= value;
//this["_uname"] = value
console.
log(`$
屬性變了`);
//知道變數變化，就自動呼叫change()方法，掃瞄數你dom樹，找到受影響的元素，更新真事dom樹上對應節點的內容
change
(key);}
, enumerable:
true}}
)(key);}
)}object.
seal
(data)
;//將每個屬性的configurable: false
console.
log(data)
;//vue第二部：構建虛擬dom樹，並完成首次繫結元素內容
//準備陣列儲存所有可能受影響的元素
var arr =
;//遞迴遍歷指定父元素下所有內容為}的元素
function
getchildren
(parent)
else
}中的變數名和data中某個屬性名一致，才有必要將元素新增到虛擬dom樹陣列中
if(c.innerhtml ==
`}}`))
;//在首次掃瞄是，還需要首次填充頁面內容
c.innerhtml = data[key];}
}}}}
getchildren
(document.body)
; console.
log(arr)
;//封裝虛擬dom樹並修改內容的方法
//根據賓士發生變化的屬性，查詢虛擬dom樹中受影響的節點，跟真事dom樹中節點的內容
// 比如 score
function
change
(key)}`)
}}//測試響應系統
setinterval
(function()
,2000);
script
>
body
>
html
>
Vue 雙向繫結的原理
vue雙向繫結的原理 大致思路 首先vue會使用documentfragment劫持根元素裡包含的所有節點，這些節點不僅包括標籤元素，還包括文字，甚至換行的回車。然後vue會把data中所有的資料，用defindproperty 變成vue的訪問器屬性，這樣每次修改這些資料的時候，就會觸發相應屬性的...
vue雙向繫結的原理
vue雙向繫結的原理 為什麼要學習雙向繫結的原理？面試提公升自我學習能力 vue實現雙向資料繫結的原理就是利用了 object.defineproperty 這個方法重新定義了物件獲取屬性值 get 和設定屬性值 set 的操作來實現的。它接收三個引數，要操作的物件，要定義或修改的物件屬性名，屬性描...
vue雙向繫結的原理
為什麼要學習雙向繫結的原理？面試提公升自我學習能力 vue雙向資料繫結的原理利用object.defineproperty 重新定義了物件獲取屬性值 get 和設定屬性值 set 的操作來實現的。用法 object.defineproperty 要操作的物件，要定義或修改的物件屬性名，屬性描述符 屬...