浅谈vue的数据响应式原理

心语：我行过很多地方的桥，看过许多次数的云，喝过许多种类的酒，却只爱过一个正当最好年龄的人。

首先，我们应该对于vue框架要有一个基本的认识，Vue 是一个基于MVVM设计模式的渐进式框架， Vue 在背后做了大量工作。数据和 DOM 已经被建立了关联，所有东西都是响应式的。

Vue.js 一个核心思想是数据驱动。所谓数据驱动，是指视图是由数据驱动生成的，我们对视图的修改，不会直接操作 DOM，而是通过修改数据。——《Vue.js 技术揭秘》

在一个组件实例中，只有在data里初始化的数据才是响应的，Vue不能检测到对象属性的添加或删除，没有在data里声明的属性不是响应的。
Vue在视图初始化和视图更新时都会调用render 方法进行重新渲染。触发这些数据的 get 方法从而收集到本次渲染的所有依赖。而当我们在修改这些收集到依赖的数据时，会触发数据中的 set 属性方法，该方法会修改数据的值并 notify 到依赖到它的观察者，从而触发视图的重新渲染。

而我们定义在data中的数据并没有set，get的计算属性，get、set方法是如何产生的呢？这便是Vue的数据响应式的核心工作，重写数据的 get 和 set 属性方法。

官方是这样解答响应式原理：

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。

每个vue实例都有一个watcher实例，它会在实例渲染时记录这些属性，并在setter触发时重新渲染。所以我们想让数据成为响应式就得在data中定义，哪怕是一个空值。

Object.defineProperty实现

Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个观察者，在数据变更的时候通知订阅者更新视图。

function render () {
   
  console.log('视图渲染了')