一步一步看Vue原理
2019-05-29 本文已影响13人
LeeDev
在了解
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的运行原理
Vue原理.png
Array 的监测
监听Array.png
