Vue 如何追踪数据变化

Vue 是一个数据驱动的MVVM框架，其数据变化追踪机制可以让开发者非常方便地进行可靠的开发。Vue 如何追踪数据变化呢？下面是一些关于 Vue 数据变化追踪机制的详细描述。

1. 响应式数据

Vue 中的数据变化追踪是通过"响应式数据"这一概念实现的。所谓"响应式数据"，就是在Vue的实例化过程中，通过对数据进行代理实现当数据发生变化时，及时通知修改监听器。

比如，我们有以下代码：

let data = {
    name: "Tom",
    age: 18
}

我们通过一个 Vue 实例进行实例化（假设实例化过程正确）：

var vm = new Vue({
    data: data
})

在这个过程中，Vue 内部会对 data 的每一个属性进行代理，也就是在 Vue 实例对象 vm 上定义与 data 一致的属性'name'和'age'，并且将这些属性设置成可观测的（observable）。这样一来，当我们修改 data 中的'name'或'age'时，Vue 内部会监听这些修改并进而“服务好”我们的应用程序。例如：

// 通过vm来修改数据
vm.name = "lucy";
vm.age = 20;

Vue 内部就会及时发出通知，通知相关的组件或者指令进行更新操作。

2. 响应式数据和依赖收集

Vue 在响应式数据背后，使用了一种称之为“依赖收集”的机制。当我们访问一个 Vue 的响应式属性时，Vue 内部的“依赖收集”机制会记住这个“依赖”（也就是属性所在的 Watcher）。比如下面的代码：

<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ computedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },

  computed: {
    computedMessage() {
      return this.message.toUpperCase();
    },
  },
};
</script>

当 Vue 实例首次挂载时，Vue 会对每个响应式数据（这里是 message 属性）进行依赖收集。当 message 属性发生改变时，Vue 会通知之前收集的 Watcher（在这里是 computedMessage 中使用的 Watcher），进而更新这个 Watcher 所在的组件的视图。

示例说明：

示例一：基本使用

对于一个 Vue 实例，我们可以使用 $watch API 来监听一个响应式属性的变化。Vue 会在内部将它变成一个 Watcher 对象，并且把它添加到 Watcher 列表中。

如下所示：

<template>
  <div>
    <span>{{ count }}</span>
  </div>
</template>

<script>
export default {
  data: {
    return {
      count: 0,
    };
  },

  created() {
    this.$watch('count', (newValue, oldValue) => {
        console.log(`count值变化了，新的值为：${newValue}，旧的值为：${oldValue}`);
    });
  },
};
</script>

在这个示例中，我们在 Vue 实例创建并初始化之后，使用 $watch()API 监听 count 属性。当 count 发生变化时，我们将在控制台中看到该输出函数的执行结果。

示例二：computed 计算属性

computed 是用于计算基于依赖关系的响应式属性的语法糖。当一个 computed 属性被定义时，Vue 会自动为其创建一个 Watcher，并且将其加入到依赖列表中。

如下所示：

<template>
  <div>
    <input v-model = "price">
    <span>{{ total }}</span>
  </div>
</template>

<script>
export default {
  data: {
    return {
      price: 0,
      quantity: 0,
    };
  },

  computed: {
    total() {
      return this.price * this.quantity;
    },
  },
};
</script>

在这个示例中，我们使用 computed 属性来计算 total 的值。它会动态地响应 price 和 quantity 的变化，并自动重新计算并更新。

这是因为，依赖 price 和 quantity 的 Watcher 在 mounted 生命周期钩子时已经被创建并加入到了依赖列表中，在这里，当 price 或 quantity 的值发生变化时，它们会通知 total 的 Watcher，从而引发 total 的重新计算。