vue数据响应式原理

vue官网响应式原理

响应式数据的最终目标：是当对象本身或对象属性发生变化时（例如在数组中添加一个值，或者给对象添加一个属性），将会运行一些函数，最常见的就是render函数（重新渲染）

在具体实现上，vue用到了几个核心部件：

1. Observer

Observer要实现的目标就是把一个普通的对象转换为响应式的对象，为了实现这一点Observer通过遍历把对象中的每个属性通过Object.defineProperty转换为带有getter和setter的属性，这样一来，当访问或设置属性时，vue就有机会做一些别的事情。

Observer是vue内部的构造器，我们可以通过Vue提供的静态方法 Vue.observable（object） 间接使用该功能。

<template>
 <div id="app"></div>
</template>
<script>
export default {
 name: "App",
 created() {
    let obj = {
      a: 1,
      b: {
        b1: 1,
        b2: 2,
      },
      c: [1, 2, 3],
    };
    console.log(obj);
  },
};
</script>

这是一个原生的对象

<template>
 <div id="app"></div>
</template>

<script>
import Vue from "vue";
export default {
 name: "App",
 created() {
    let obj = {
      a: 1,
      b: {
        b1: 1,
        b2: 2,
      },
      c: [1, 2, 3],
    };
    Vue.observable(obj);
    console.log(obj);
  },
};
</script>

使用 Vue.observable（object） 之后，可以看到给对象中的每个属性都添加了getter和setter属性

由于遍历时只能遍历到对象的当前属性，因此无法监测到将来动态增加或删除的属性，因此vue提供了$set和$delete两个实例方法，让开发者通过这两个实例方法对已有响应式对象添加或删除属性。

对于数组，vue会更改它的隐式原型（proto），之所以这样做，是因为vue需要监听那些可能改变数组内容的方法（push，pop等等）。

这是一个原生的数组：

使用 Vue.observable（object） 之后，可以看到 proto 被修改了

但是如果是通过数组的下标来修改数组的值依然是监听不到，这时候还是要使用$set方法

总结：Observer的目标，就是要让一个对象，它属性的读取、赋值、内部数组的变化都要能被vue感知到。

2. Dep

Dep的含义是Dependency，表示依赖的意思

Observer给每个属性添加的getter和setter属性，但是当读取属性的时候做什么事，属性变化的时候做什么，这个就依靠Dep来解决

Vue会为响应式对象中的每个属性、对象本身、数组本身创建一个Dep实例，每个Dep实例都有能力做以下两件事：

1. 记录依赖：是谁在用我，比如在render中有个p标签读取了响应式数据，这时就会记录这个p（render）为依赖
2. 派发更新：我变了，我要通知那些用到我的人，比如render中有个p标签为依赖，当响应式数据改变时，就会通知p（render）数据改变了

例子：

<template>
 <div id="app">{{ a.a1 }}</div>
</template>

<script>
export default {
 data() {
   return {
     a: {
       a1: 1,
       a2: 2,
      },
    };
  },
};
</script>