剖析Vue2.x响应式系统核心原理，带你揭开Vue源码背后的奥秘

2023-09-17 16:20:07

大家好，欢迎来到《Vue源码浅析》系列的第二篇！在上一篇文章中，我们探索了Vue2.X版本中响应式系统的依赖收集与派发更新机制。而在这篇文章中，我们将深入剖析响应式系统中的更新机制，并揭示侦听/计算属性是如何实现的。

在介绍更新机制之前，我们先来回顾一下上一篇文章中提到的响应式系统。在Vue中，响应式系统是一个数据观测系统，它能够自动追踪数据的变化，并自动更新与数据相关的视图。这个过程主要分为三个步骤：

依赖收集 ：在模板编译阶段，Vue会收集模板中所有与数据相关的表达式，并建立表达式与数据的依赖关系。
派发更新 ：当数据发生改变时，Vue会触发一个更新过程，将数据的新值派发给所有依赖于它的表达式。
视图更新 ：表达式收到数据的新值后，会重新计算表达式的值，并将结果更新到视图中。

更新机制

在Vue中，更新机制主要包括两个部分：

标记脏组件 ：当数据发生变化时，Vue会将所有依赖于该数据的组件标记为脏组件。
重新渲染脏组件 ：Vue会对所有脏组件进行重新渲染，以更新视图中的数据。

标记脏组件的过程是通过一个名为Dep.target的全局变量实现的。当一个组件被标记为脏组件时，Dep.target会被设置为该组件的实例。这样，当数据发生变化时，Vue会自动将所有依赖于该数据的表达式添加到Dep.target中。

重新渲染脏组件的过程是通过一个名为updateComponent的方法实现的。updateComponent方法会对组件进行重新渲染，并将重新渲染后的结果更新到视图中。

侦听属性

侦听属性是Vue中的一种特殊属性，它可以让我们在数据发生变化时执行特定的操作。侦听属性的语法如下：

<template>
  <input type="text" v-model="name">
</template>

<script>
export default {
  data() {
    return {
      name: ''
    }
  },
  watch: {
    name(newVal, oldVal) {
      // 当name属性发生变化时，这个函数就会被调用
    }
  }
}
</script>

在上面的示例中，当name属性发生变化时，watch方法就会被调用。watch方法的第一个参数是新值，第二个参数是旧值。我们可以根据新值和旧值来执行特定的操作，例如发送一个网络请求或者更新另一个属性的值。

计算属性

计算属性是Vue中另一种特殊属性，它可以让我们在数据发生变化时自动计算出一个新的值。计算属性的语法如下：

<template>
  <p>我的年龄是：{{ age }}</p>
</template>

<script>
export default {
  data() {
    return {
      birthday: '1990-01-01'
    }
  },
  computed: {
    age() {
      return new Date().getFullYear() - new Date(this.birthday).getFullYear()
    }
  }
}
</script>