转载声明：原文链接：https://blog.csdn.net/qq_44722915/article/details/106593935

什么是 Vue 响应式 ？
当视图模型（VM）中的数据模型（M）发生改变时， 视图（V）就会进行更新。

Vue 响应式怎么实现 ？
官网说明 ：
当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部装换为 getter / setter 。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。
更具体的理解 ：
利用 Object.defineProperty 进行 数据劫持 同时结合观察者模式（发布 / 订阅模式）来实现数据双向绑定，这也是 vue 响应式原理的核心。

数据双向绑定 ？
所谓的数据双向绑定，就是 view 的变化能反映到 ViewModel 上，ViewModel 的变化能同步到 view 上。
new Vue一个实例对象a，其中有一个属性a.b，那么在实例化的过程中，通过Object.defineProperty()会对a.b添加getter和setter，同时Vue.js会对模板做编译，解析生成一个指令对象（这里是v-text指令），每个指令对象都会关联一个Watcher,当对a.b求值的时候，就会触发它的 getter，当修改a.b的值的时候，就会触发它的setter，同时会通知被关联的Watcher，然后Watcher就会再次对a.b求值，计算对比新旧值，当值改变了，Watcher就会通知到指令，调用指令的update()方法，由于指令是对DOM的封装，所以就会调用DOM的原生方法去更新视图，这样就完成了数据改变到视图更新的一个自动过程。

数据驱动 ？
Vue.js 一个核心思想是 数据驱动。所谓 数据驱动是指视图是由数据驱动生成的，对视图的修改，不会直接操作 DOM，而是通过修改数据。相比传统的前端开发，如使用 jQuery 等前端库直接修改 DOM，大大简化了代码量，特别是当交互复杂的时候，只关心数据的修改会让代码的逻辑变的非常清晰，因为 DOM 变成了数据的映射，我们所有的逻辑都是对数据的修改，而不用碰触 DOM，这样的代码非常利于维护。

数据劫持和订阅发布 ？
数据劫持： Object.defineProperty 中的 getter/setter ， 数据改变就执行 watcher。
订阅发布：事件（自定义事件）；订阅： 事件的声明 vm.on发布：事件的触发vm.on发布：事件的触发vm.emit。

v-model 实现原理 ？
v-model只是语法糖而已；主要利用 :value 属性的绑定和 @input 事件的触发去实现的。给组件添加 v-model 属性时，默认会把 value 作为组件的属性，然后把 'input' 值作为给组件绑定事件时的事件名。

<!--二者等价-->
<input v-model="str" />
 
<input :value="str" @input="str=$event.target.value" />
<!--input 元素本身有个 oninput 事件，这是 HTML5 新增加的，类似 onchange ，每当输入框内
容发生变化时，就会触发oninput，把最新的value传递给 str。-->