vue双向数据绑定原理

Vue应用的是mvvm框架，view和model分离，然后通过vm双向数据绑定，`

<code class="hljs handlebars has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="xml" style="box-sizing: border-box;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!-- 模板 --></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">id</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"app"</span>></span>
</span><span class="hljs-expression" style="box-sizing: border-box;">{{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">msg</span>}}</span><span class="xml" style="box-sizing: border-box;">
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">!-模型-</span>></span>
// 原生对象即数据
var data = {
msg: 'hello!'
}
// 创建一个 ViewModel 实例
var vm = new Vue({
// 选择目标元素
el: '#app',
// 提供初始数据
data: data
})</span></code><code class="hljs handlebars has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="xml" style="box-sizing: border-box;"></span></code><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.1em; color: rgb(54, 46, 43); font-family: "microsoft yahei"; font-size: 14px; line-height: 26px;">然而一个动态数据的绑定，是怎么实现的呢，首先Vue利用es5的defineProperty方法里的get，set方法，进行数据的设置和获取。</p><pre class="prettyprint" name="code" style="white-space: nowrap; word-wrap: break-word; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-top: 0px; margin-bottom: 1.1em; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; line-height: 1.45; word-break: break-all; color: rgb(51, 51, 51); border: 1px solid rgba(128, 128, 128, 0.0745098); border-radius: 0px; background-color: rgba(128, 128, 128, 0.0470588);"><code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> Object.defineProperty(Vue.prototype, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'$data'</span>, {
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">get</span> () {
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>._data
},
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">set</span> (newData) {
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (newData !== <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>._data) {
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>._setData(newData)
}
}   })
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li></ul>

从这段源码可以看出设置数据时会调用setData方法，而setData的实现如下

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">Vue.prototype._setData = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(newData)</span> {</span>
newData = newData || {}
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> oldData = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>._data
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>._data = newData
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> keys, key, i
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// unproxy keys not present in new data</span>
keys = <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">Object</span>.keys(oldData)
i = keys.length
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">while</span> (i--) {
key = keys[i]
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (!(key <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">in</span> newData)) {
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>._unproxy(key)
}
}
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// proxy keys not already proxied,</span>
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// and trigger change for changed values</span>
keys = <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">Object</span>.keys(newData)
i = keys.length
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">while</span> (i--) {
key = keys[i]
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (!hasOwn(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>, key)) {
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// new property</span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>._proxy(key)
}
}
oldData.__ob__.removeVm(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>)
observe(newData, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>)
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>._digest()
}</code>

这段代码的后三行可知首先移除旧的数据，然后调用observe(newData, this)；

<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">export function observe (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">value</span>, vm) {
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (!<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">value</span> || <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">typeof</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">value</span> !== <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'object'</span>) {
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span>
}
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> ob
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (
hasOwn(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">value</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'__ob__'</span>) &&
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">value</span>.__ob__ instanceof Observer
) {
ob = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">value</span>.__ob__
} <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (
shouldConvert &&
(isArray(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">value</span>) || isPlainObject(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">value</span>)) &&
Object.isExtensible(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">value</span>) &&
!<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">value</span>._isVue
) {
ob = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Observer(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">value</span>)
}
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (ob && vm) {
ob.addVm(vm)
}
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> ob</code>

} 

根据新的数据建立一个新的观察对象，这里提一下，vue用的是订阅模式，首先会把每个数据订阅一下，当数据变化时，会通知watcher重新计算值 

最后一行代码this._digest()就是通知更新对象的值，把对象设置成newData，我理解的大概过程是这样的，大家看到有错误理解的欢迎给我指出来。这里提醒一下之前犯过的错误，例如：

<code class="hljs handlebars has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="xml" style="box-sizing: border-box;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">template</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span></span><span class="hljs-expression" style="box-sizing: border-box;">{{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">user.sex</span>}}</span><span class="xml" style="box-sizing: border-box;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">template</span>></span>

Data(){
User:{}
}
Ready(){
This.user={name:’smx’,age:12};
This.user.sex=’女’;
}</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>

这将在视图里面无法显示，this.user是通过defineProperty里set方法设置进去的，所以在后面再设置属性的时候对象将不能跟踪到该属性