浅析 Vue 数据响应式

什么是响应式

一个物体对外界的刺激做出反应，这样的行为就是响应式。

响应式网页是啥？

如果我改变窗口大小，网页内容会做出响应，那就是响应式网页（当然用户没事不会拖动网页大小的）。

Vue的data是响应式

const vm=new Vue((data: n: 0))

修改wm.n,那么UI中的n就会响应我的改动；

Vue2通过Object. defineproperty来实现数据响应式。

响应式的实现方法

Vue实例接受一个data对象，然后Object.definrProperty会遍历这个对象的所有属性。之后全部转为gettter/setter。之后每个组件实例都会对应一个监管者watcher，只要触发setter，那么监管者就会知道，从而使相关的组件重新渲染。

即options.data：

1. 会被Vue监听；
2. 会被Vue实例代理；
3. 每次对data的读写都会被Vue监控；
4. Vue会在data变化时更新UI。

举个例子

new Vue({
      data: {
        n: 0
      },
      template: `
        <div>
        {{n}}
        <hr/>
        <button @Click ="add">+1</button/>
        </div>
       `,
      methons: {
        add(){
          this.n += 1;
        }
    }
}).$mount("#app")

数字n在页面上显示的是0，当我按下+1按钮时，数字+1，这就是数据响应式。