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事件
<inputtype="text"v-model="msg"/><!--等同于--><inputtype="text"v-bind:value="msg"v-on:input="msg=$event.target.value"/>//下拉框案列<body><divid="app"><selectv-model="mySelect"><optionvalue="orange">橙子</option><optionvalue="apple">苹果</option><optionvalue="banana">香蕉</option></select></div></body><script>constvm=newVue({el:'#app',data:{mySelect:'banana'}})</script>```<divid="app"><inputtype="text"v-model="word"><h2>{{word}}</h2></div></body></html><scriptsrc="./lib/vue.js"></script><script>varvm=newVue({el:"#app",data:{word:"helloVue"}})</script><inputtype="text"id="ipt"value=""oninput="changeData(this.value)"><h2id="title"></h2><script>//声明一个data对象，专门用来放数据vardata={};//获取元素vartitle=document.getElementById("title");vaript=document.getElementById("ipt");//定义对象属性Object.defineProperty(data,"msg",{get:function(){return"helloworld"},set:function(newValue){//自动捕获被修改后最新的值title.innerHTML=newValue;txt.value=newValue;}})//最初的赋值title.innerHTML=data.msg;ipt.value=data.msg;//拿到input的数据，修改msg，当msg修改时，会触发set方法functionchangeData(value){data.msg=value;}</script>vue的双向数据绑定原理是什么？
vue数据双向绑定是通过数据劫持结合“发布者-订阅者模式”的方式来实现的。 vue是通过Object.defineProperty()来实现数据劫持，其中会有getter()和setter方法；当读取属性值时，就会触发getter()方法，在view中如果数据发生了变化，就会通过Object.defineProperty()对属性设置一个setter函数，当数据改变了就会来触发这个函数。