在了解
Vue之前板丽，我們可能會(huì)對(duì)Wacher & Dep, 有個(gè)大概的認(rèn)識(shí)扔亥，下面我通過一個(gè)簡(jiǎn)單的例子來看看我們的vue是怎么走的。
<head>
<title>Vue testing</title>
<meta charset="utf-8">
<script type="text/javascript" src="./lib/vue.js">
</script>
</head>
<body>
<div id='app'>
<p>
{{a}}
</p>
<br>
<input type="submit" @click='click'>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
a: '0000'
}
, methods: {
click() {
this.a = '1111'
}
}
})
</script>
</body>
</html>
下面的圖主要介紹了 一些收集原理兑凿，有些無關(guān)的代碼我直接忽略掉凯力，因?yàn)橐郧拔易约嚎葱┎┛涂倲?shù)感覺 Dep 和 Watcher 連不起來。
大概有以下幾個(gè)問題:
-
Dep.target的值是什么時(shí)機(jī)賦值的? - 在
Object.defineProperty中的get方法中觸發(fā)收集, 什么時(shí)候會(huì)觸發(fā)get? - 插值變量
{{a}}, 是怎么樣更新數(shù)據(jù)的 ?
下面的圖片 慢慢的 剖析Vue的運(yùn)行原理
Vue原理.png
Array 的監(jiān)測(cè)
監(jiān)聽Array.png
