前言
之前公司招人，不再绑定面试了一些的搞混前端同学，因为公司使用的式原双向数据前端技术是Vue，所以免不了问到其响应式原理和Vue的理和双向数据绑定。但是不再绑定这边面试到的80%的同学会把两者搞混，通常我要是搞混先问响应式原理再问双向数据绑定原理，来面试的式原双向数据同学大都会认为是一回事，那么这里我们就说一下二者的理和区别。
响应式原理
是不再绑定Vue的核心特性之一，数据驱动视图，搞混我们修改数据视图随之响应更新，式原双向数据就很优雅~
Vue2.x是理和借助Object.defineProperty()实现的，而Vue3.x是不再绑定借助Proxy实现的，下面我们先来看一下2.x的搞混实现。
Object.defineProperty(obj,式原双向数据 key, {
enumerable: true,
configurable: true,
//拦截get，当我们访问data.key时会被这个方法拦截到
get: function getter () {
//我们在这里收集依赖
return obj[key];
},
//拦截set，免费源码下载当我们为data.key赋值时会被这个方法拦截到
set: function setter (newVal) {
//当数据变更时，通知依赖项变更UI
}
})
复制代码我们通过Object.defineProperty为对象obj添加属性，可以设置对象属性的getter和setter函数。之后我们每次通过点语法获取属性都会执行这里的getter函数，在这个函数中我们会把调用此属性的依赖收集到一个集合中 ；而在我们给属性赋值(修改属性)时，会触发这里定义的setter函数，在次函数中会去通知集合中的依赖更新，做到数据变更驱动视图变更。
3.x的与2.x的核心思想一致，只不过数据的劫持使用Proxy而不是Object.defineProperty，只不过Proxy相比Object.defineProperty在处理数组和新增属性的响应式处理上更加方便。
let nObj=new Proxy(obj,{
//拦截get，当我们访问nObj.key时会被这个方法拦截到
get: function (target, propKey, receiver) {
console.log(`getting ${propKey}!`);
return Reflect.get(target, propKey, receiver);
},
//拦截set，当我们为nObj.key赋值时会被这个方法拦截到
set: function (target, propKey, value, receiver) {
console.log(`setting ${propKey}!`);
return Reflect.set(target, propKey, value, receiver);
}
})
复制代码Proxy的详细使用方法参考ES6教程。
Vue的响应式原理的实现细节相信大多数同学已经很熟悉了，这里就不在展开细谈了，如果还想更详细的了解，或者想要做一个简易的Vue实现，b2b供应网可以参考这篇Vue原理，相信你会有不小收获。
双向数据绑定
双向数据绑定通常是指我们使用的v-model指令的实现，是Vue的一个特性，也可以说是一个input事件和value的语法糖。Vue通过v-model指令为组件添加上input事件处理和value属性的赋值。
复制代码上述的组件就相当于如下代码
{{localValue}}
export default{
data(){
return {
localValue:,
}
},
methods:{
onInput(v){
//在input事件的处理函数中更新value的绑定值
this.localValue=v.target.value;
console.log(this.localValue)
}
}
}
复制代码因此当我们修改input输入框中的值时，我们通过v-model绑定的值也会同步修改，基于上述原理，我们可以很容易的实现一个数据双向绑定的组件。
v-model实践
首先我们定义一个Vue组件，相信大家已经很熟悉了。
click me {{value}}export default{
props:{
//关键的第一步：设置一个value属性
value:{
type:Number,
default:0
}
},
watch:{
//监听value变化，更新组件localvalue状态
value(v){
this.localvalue=v;
}
},
methods:{
//关键的第二步：事件触发localvalue变更，通过事件同步父组件状态变更
addCount(){
this.localvalue++;
this.$emit(input,this.localvalue);
}
},
data(){
return{
//组件状态，遵守单项数据流原则，亿华云计算不直接修改props中的属性
localvalue:0
}
},
created(){
//初始化获取value值
this.localvalue=this.value;
}
}
复制代码上面的组件定了我们通过在props中添加value属性，并且在值更新时触发input事件。created钩子和watch中为localvalue赋值是为了同步父组件状态到子组件中。通过上面
(责任编辑：数据库)