在了解
Vue
之前,我们可能会对Wacher & Dep
, 有个大概的认识,下面我通过一个简单的例子来看看我们的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>
下面的图主要介绍了 一些收集原理,有些无关的代码我直接忽略掉,因为以前我自己看些博客总数感觉 Dep 和 Watcher 连不起来。
大概有以下几个问题:
-
Dep.target
的值是什么时机赋值的? - 在
Object.defineProperty
中的get
方法中触发收集
, 什么时候会触发get
? - 插值变量
{{a}}
, 是怎么样更新数据的 ?
下面的图片 慢慢的 剖析Vue
的运行原理
监听Array.pngArray 的监测
网友评论