我对Vue数据响应式的理解

代码示例

const vm = new Vue({
  data: {
    n: 0
  },
  template:`
    <div>{{n}}<div>
  `
}).$mount("#app")

当data中n的内容发生改变的时候，Vue可以监听这种改变，并将更新后的n呈现到页面上
那么Vue是怎么做到的呢？

首先Vue会在new Vue的时候对data中的数据进行处理，通过Object.defineProperty和getter/setter等方式用一个虚拟的n覆盖掉上面传入的n；
然后当我们通过别的操作修改n的值的时候，修改的其实是虚拟的n的值，而Vue可以监听虚拟的n的变化，在监听的过程中，可以进行对视图的修改等操作，这样Vue就可以通过监听n的变化进行响应式操作