1、vue 双向数据绑定原理
vue 双向数据绑定原理是通过 **数据劫持** 结合 发布订阅模式 的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
2、核心
关于Vue双向数据绑定，其核心是 Object.defineProperty()方法；
3、介绍一下Object.defineProperty()方法
- Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj （要定义其上属性的对象） prop （要定义或修改的属性） descriptor （具体的改变方法）
- 简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法；
v-model原理(掌握)
v-model 其实是个语法糖，它背后本质上包含了两个操作：
v-bind绑定input元素的value属性v-on指令绑定input元素的input事件
<input type="text" v-model="msg"/>
<!-- 等同于 -->
<input type="text" v-bind:value="msg" v-on:input="msg = $event.target.value"/>
// 下拉框案列
<body>
<div id="app">
<select v-model="mySelect">
<option value="orange">橙子</option>
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
</select>
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
mySelect: 'banana'
}
})
</script>
```
<div id="app">
<input type="text" v-model="word">
<h2>{{word}}</h2>
</div>
</body>
</html>
<script src="./lib/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
word: "hello Vue"
}
})
</script>
<input type="text" id="ipt" value="" oninput="changeData(this.value)">
<h2 id="title"></h2>
<script>
// 声明一个data对象，专门用来放数据
var data = {};
// 获取元素
var title = document.getElementById("title");
var ipt = document.getElementById("ipt");
// 定义对象属性
Object.defineProperty(data, "msg", {
get: function(){
return "hello world"
},
set: function(newValue){ // 自动捕获被修改后最新的值
title.innerHTML = newValue;
txt.value = newValue;
}
})
// 最初的赋值
title.innerHTML = data.msg;
ipt.value = data.msg;
// 拿到input的数据，修改msg，当msg修改时，会触发set方法
function changeData(value){
data.msg = value;
}
</script>
vue的双向数据绑定原理是什么？
vue数据双向绑定是通过数据劫持结合“发布者-订阅者模式”的方式来实现的。 vue是通过Object.defineProperty()来实现数据劫持，其中会有getter()和setter方法；当读取属性值时，就会触发getter()方法，在view中如果数据发生了变化，就会通过Object.defineProperty()对属性设置一个setter函数，当数据改变了就会来触发这个函数；
