vue双向绑定原理

按理来说，这种问题不应该拿来说，可是每当想到大家搜索引擎的第一个答案是说响应式原理，就觉得需要来给大家一个提醒：你如果只回答了响应式原理的那一部分内容，那么你就容易被人认为是只会背八股，实际上你并不知道双向绑定的这个过程和理解。

想写这些的起因是在看某平台的前端文章热榜中有一篇说面试中问双向绑定原理和响应式原理大家很容易认为是同一个的事，其实从双向绑定的实现过程中来说，回答了响应式原理也没错，只不过双向绑定呢？

不看别的，从vue的官方文档开始，这里用vue2.x说

注意第一段文字，双向绑定原理首先你得说清楚，vue是通过v-model实现，v-model是一个监听表单元素change事件和绑定value属性的语法糖，然后再回答响应式原理的内容

<input v-model='localValue'/>
<input @input='onInput' :value='localValue' />

一上来就背响应式原理的内容，你到底理解没有vue的这个机制逻辑，可能技术面的面试官心里会对你打一个问号

接下来就是响应式原理，这个地方你可以只回答：vue通过Object.defineProperty()进行数据劫持结合发布订阅模式实现响应式，然后呢？不还是背八股。

你不如好好讲一下，vue是在创建vm实例的过程中通过Object.defineProperty()修改data中的属性，给他们设置对象属性的getter和setter函数。之后我们每次通过点语法获取属性都会执行这里的getter函数，在这个函数中我们会把调用此属性的依赖收集到一个集合中 ；而在我们给属性赋值(修改属性)时，会触发这里定义的setter函数，在次函数中会去通知集合中的依赖更新，做到数据变更驱动视图变更。

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
    } 
})