「从零开始的 Vue 3 系列」：第六章——深入理解与优化 computed 和 watch 的使用

前言

本系列将从零开始，系统性地介绍 Vue 3 的常用 API，逐步深入每个核心概念与功能模块。通过详尽的讲解与实战演示，帮助大家掌握 Vue 3 的基础与进阶知识，最终具备独立搭建完整 Vue 3 项目的能力。

computed ：

在 Vue 3 中，computed 计算属性的使用与 Vue 2 相比有一些变化，主要体现在 API 风格和内部机制的改进。以下是它们之间的区别以及如何在 Vue 3 中使用 computed。

Vue 2 中 computed 的使用

在 Vue 2 中，computed 是直接在组件选项对象（Options API）中定义的。

export default {
  data() {
    return {
      number: 0
    };
  },
  computed: {
    doubleNumber() {
      return this.number * 2;
    }
  },
  methods: {
    increment() {
      this.number++;
    }
  }
};

Vue 3 中 computed 的使用

Vue 3 引入了组合式 API（Composition API），并且通过 setup 函数和 computed 函数实现计算属性。虽然 Vue 3 中仍然支持 Vue 2 的 Options API，但 Composition API 提供了更灵活和模块化的方式来组织代码。

import { ref, computed } from 'vue';

export default {
  setup() {
    const number = ref(0);

    // 定义计算属性
    const doubleNumber = computed(() => number.value * 2);

    const increment = () => {
      number.value++;
    };

    return {
      number,
      doubleNumber,
      increment
    };
  }
};

区别：

PI 风格：

• Vue 2：在 Options API 中使用 computed，直接通过选项对象定义。
  Vue 3：通过 setup 函数与组合式 API 来定义，使用 computed 函数显得更加灵活，且与 ref 和 reactive 等组合式 API 更好地结合。
• computed 函数返回的是一个响应式对象：
  在 Vue 3 中，computed 返回的是一个具有 .value 属性的响应式对象，而不是直接的值。这是因为 Vue 3 引入了对 ref 和响应式对象的广泛支持。
• 支持 Getter 和 Setter：
  Vue 2：如果你需要计算属性既有 getter 又有 setter，需要通过 set 手动定义。
  Vue 3：在 computed 函数中可以更方便地定义带有 getter 和 setter 的计算属性。

Vue 3 中的 computed 使用示例

只读：

import { ref, computed } from 'vue';

export default {
  setup() {
    const number = ref(0);
    
    const doubleNumber = computed(() => number.value * 2);

    return { number, doubleNumber };
  }
};

可写：

import { ref, computed } from 'vue';

export default {
  setup() {
    const number = ref(0);
    
    // 带 getter 和 setter 的计算属性
    const doubleNumber = computed({
      get: () => number.value * 2,
      set: (value) => {
        number.value = value / 2;
      }
    });

    return { number, doubleNumber };
  }
};

watch :

在 Vue 3 中，watch 函数用于观察并响应某个状态（如 ref、reactive 对象或计算属性）的变化。每当被观察的状态发生变化时，watch 会执行回调函数，从而允许你在数据变化时执行特定的逻辑。

基本用法

1 .监听一个ref

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    // 监视 count 变化
    //newValue新值，oldValue老值
    watch(count, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });

    const increment = () => {
      count.value++;
    };

    return { count, increment };
  }
};
</script>

2. 监视多个数据源

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const firstName = ref('John');
    const lastName = ref('Doe');

    // 监视 firstName 和 lastName 变化
    watch([firstName, lastName], ([newFirstName, newLastName], [oldFirstName, oldLastName]) => {
      console.log(`First name changed from ${oldFirstName} to ${newFirstName}`);
      console.log(`Last name changed from ${oldLastName} to ${newLastName}`);
    });

    return { firstName, lastName };
  }
};
</script>

3. 监视 reactive 对象的属性

<script>
import { reactive, watch } from 'vue';

export default {
  setup() {
    const user = reactive({
      firstName: 'John',
      lastName: 'Doe'
    });

    // 监视 reactive 对象的某个属性
    watch(() => user.firstName, (newValue, oldValue) => {
      console.log(`First name changed from ${oldValue} to ${newValue}`);
    });

    return { user };
  }
};
</script>

4.深度监视（deep 选项）

<script>
import { reactive, watch } from 'vue';

export default {
  setup() {
    const user = reactive({
      name: {
        first: 'John',
        last: 'Doe'
      },
      age: 30
    });

    // 深度监视整个对象
    watch(user, (newValue, oldValue) => {
      console.log('User object changed', newValue);
    }, { deep: true });

    return { user };
  }
};
</script>

立即执行（immediate 选项）
可以使用 immediate: true 选项，使得 watch 在初始化时立即执行一次。

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    // 立即执行 watch 回调
    watch(count, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    }, { immediate: true });

    return { count };
  }
};
</script>

总结

Vue 3 中的 computed 和 watch 提供了强大而灵活的工具来处理复杂的状态管理需求，适用于从简单到复杂的各种应用场景。通过掌握它们，你可以在 Vue 3 项目中更有效地管理和响应数据变化。

ps:以上内容仅为本人对 vue3生命周期的个人理解，如有不足之处，欢迎大家指正与交流，共同进步。