1.vue双向绑定的实现
v-xxx 是vue中的指令，
v-model是双向绑定
例1：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>双向绑定</title>
</head>
<body>
<div class="app">
<input type="text" class="txt" v-model=msg>
{{msg}}
</div>
</body>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'.app',
data:{
msg:'hello world'
}
})
</script>
</html>
2.Vue双向绑定的原理
vue数据双向绑定是通过 数据劫持 结合 发布者-订阅者模式 的方式来实现的；
数据劫持的实现方式 Object.defineProperty()
当你把一个普通的JavaScript 对象传入 Vue 实例作为 data 选项， Vue 将便利此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。
var Book = {
name:'123456'
};
var name = "";
console.log(Book.name) //123456
Object.defineProperty(Book,'name',{
set (value) {
name = value;
console.log(value) //123
},
get() {
return '《' + name + '》'
}
})
console.log(Book.name) // 《》 此处使用get的方法
Book.name = '123' // 相当于调用set方法
console.log(Book.name) // 《123》
原理
- 实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
- 实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
- 实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。
938664-20170522225458132-1434604303.png
