setup语法糖中使用 watch

在 Vue 3 的 <script setup> 语法糖中，使用 watch 也是非常直接的。watch 用于响应式地观察数据的变化，并在数据变化时执行一些副作用操作。以下是如何在 <script setup> 中使用 watch 的详细步骤和示例。

基本用法

1. 导入 watch 函数：
   首先，需要从 vue 中导入 watch 函数。

2. 使用 watch 监听响应式数据：
   使用 watch 函数监听某个响应式数据或计算属性的变化，并定义当数据变化时需要执行的副作用操作。

示例

以下是一个使用 watch 监视 ref 数据变化的示例：

<template>
  <div>
    <input v-model="count" placeholder="Type a number" />
    <p>Count is: {{ count }}</p>
    <p>Squared count is: {{ squaredCount }}</p>
  </div>
</template>

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

// 定义一个响应式数据
const count = ref(0);

// 定义一个计算属性
const squaredCount = computed(() => count.value * count.value);

// 使用 watch 监听 count 的变化
watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});

// 也可以监听计算属性
watch(squaredCount, (newValue, oldValue) => {
  console.log(`Squared count changed from ${oldValue} to ${newValue}`);
});
</script>

详细解释

1. 导入 watch：

   import { watch } from 'vue';
   

2. 监听 ref 数据：

   watch(count, (newValue, oldValue) => {
     console.log(`Count changed from ${oldValue} to ${newValue}`);
   });
   

   这里 count 是一个 ref 数据，watch 监听它的变化，并在变化时执行传入的回调函数，回调函数接收新值和旧值作为参数。

3. 监听计算属性：

   watch(squaredCount, (newValue, oldValue) => {
     console.log(`Squared count changed from ${oldValue} to ${newValue}`);
   });
   

   这里 squaredCount 是一个计算属性，watch 也可以用于监听计算属性的变化，方式与监听 ref 数据相同。

高级用法

• 深度监听：
  如果需要对嵌套对象进行深度监听，可以使用 deep 选项。

  watch(count, (newValue, oldValue) => {
    console.log(`Count changed from ${oldValue} to ${newValue}`);
  }, { deep: true });
  

• 立即执行：
  如果需要在监听器初始化时立即执行一次回调函数，可以使用 immediate 选项。

  watch(count, (newValue, oldValue) => {
    console.log(`Count changed from ${oldValue} to ${newValue}`);
  }, { immediate: true });
  

在 <script setup> 中，watch 的用法与在常规 setup 函数中类似，但由于 <script setup> 的简化语法，你可以直接在组件中使用，无需显式地返回或声明数据。