一健爬,雙向數(shù)據(jù)綁定:
html 綁定方法
<div id="app">
<p><input type="text" v-model="msg"></p>
<p>{{msg}}</p>
</div>
js 數(shù)據(jù)注冊(cè)
<script src="js/vue.js"></script>
<script>
let vm = new Vue({
//掛載點(diǎn)
el: '#app',
data: {
msg: 'hello'
}
});
</script>
二谋旦,Vue響應(yīng)式原理:
1.當(dāng)把一個(gè)普通的 JavaScript 對(duì)象傳入 Vue 實(shí)例作為 data
選項(xiàng)件炉,Vue 將遍歷此對(duì)象所有的屬性峻凫,并使用 Object.defineProperty
把這些屬性全部轉(zhuǎn)為 getter/setter纫事。
2.這些 getter/setter 在內(nèi)部讓 Vue 能夠追蹤依賴(lài)勘畔,在屬性被訪問(wèn)和修改時(shí)通知變更。
3.每個(gè)組件實(shí)例都對(duì)應(yīng)一個(gè) watcher 實(shí)例丽惶,它會(huì)在組件渲染的過(guò)程中把“接觸”過(guò)的數(shù)據(jù)屬性記錄為依賴(lài)炫七。之后當(dāng)依賴(lài)項(xiàng)的 setter 觸發(fā)時(shí),會(huì)通知 watcher钾唬,從而使它關(guān)聯(lián)的組件重新渲染万哪。