深入浅出：Vue3 响应式系统的前世今生（二）

2023-04-21 14:34:10

Vue3 响应式系统：深入揭秘响应式 API

计算属性：响应数据的动态助手

计算属性是 Vue3 中的明星功能，它使我们能够定义动态数据属性，这些属性依赖于其他响应式数据，并在这些数据发生变化时自动更新。使用 computed 方法可以轻松定义计算属性，例如：

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

侦听器：数据变化的守望者

侦听器允许我们在响应式数据变化时执行自定义操作。使用 watch 方法可以定义侦听器，它监听特定数据，并在数据发生变化时触发回调函数。例如：

watch: {
  count(newValue, oldValue) {
    console.log(`计数已从 ${oldValue} 更改为 ${newValue}`);
  }
}

组件更新：响应性背后的魔法

响应式数据发生变化时，Vue3 会自动更新组件。这个过程包括确定受影响的组件、调用生命周期钩子、重新渲染模板等步骤。Vue3 巧妙地只更新需要更新的组件，确保高效的更新体验。

代码示例：响应式数据在行动

让我们用代码示例来体验响应式系统的力量：

// 组件模板
<template>
  <p>姓名：{{ fullName }}</p>
  <button @click="incrementCount">点击计数器</button>
</template>

// 组件脚本
<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    // 响应式数据
    const firstName = ref('John');
    const lastName = ref('Doe');
    const count = ref(0);

    // 计算属性
    const fullName = computed(() => firstName.value + ' ' + lastName.value);

    // 侦听器
    watch(count, (newValue, oldValue) => {
      console.log(`计数已从 ${oldValue} 更改为 ${newValue}`);
    });

    // 方法
    const incrementCount = () => {
      count.value++;
    };

    return {
      firstName,
      lastName,
      count,
      fullName,
      incrementCount
    };
  }
};
</script>