Vue 3 中使用 watch 和 toRefs 监听数据变化的指南

2023-10-01 07:25:14

Vue 3：提升数据响应性的两大利器：watch 和 toRefs

在构建交互式和动态的前端应用程序时，管理数据状态至关重要。Vue 3 推出了 watch 和 toRefs 这两个强大的工具，它们让监听数据变化和相应地进行响应变得轻而易举。

watch：数据变化的守卫者

watch 选项可以让你监视 Vue 实例中任何属性的改变，无论是计算属性还是数据属性。当被监视的属性发生变化时，指定的回调函数会被触发，让你可以执行相关的逻辑，比如更新界面、触发其他动作或记录变更。

使用 watch 的语法如下：

watch: {
  // 被监视的属性
  property: {
    // 处理属性变化时要执行的回调函数
    handler(newValue, oldValue) {
      // 新值和旧值可以通过 newValue 和 oldValue 访问
    },
    // 配置 watch 选项的可选参数
    options: {
      immediate: true, // 立即触发回调函数
      deep: true // 监听属性的深度变化
    }
  }
}

toRefs：将平凡变非凡

toRefs 是一个实用的函数，它可以将普通类型的值（如数字、字符串或布尔值）转换为独立的响应式对象。这对于在 Vue 组件中使用普通类型数据非常有用，因为它们本身不是响应式的。

使用 toRefs 的语法如下：

import { toRefs } from 'vue';

const 普通对象 = {
  name: 'John Doe'
}

// 将普通对象转换为响应式对象
const 响应式对象 = toRefs(普通对象)

// 响应式对象中的属性现在可以被 Vue 响应性系统跟踪
响应式对象.name.value // 'John Doe'

联手出击：watch 和 toRefs 的强强组合

将 watch 和 toRefs 结合使用，可以实现强大的响应式功能。例如，我们可以监视一个普通类型属性的变化，该属性已使用 toRefs 转换为响应式对象：

import { watch, toRefs } from 'vue';

const 普通对象 = {
  count: 0
}

// 将普通对象转换为响应式对象
const 响应式对象 = toRefs(普通对象)

// 监视响应式对象的 count 属性
watch(响应式对象.count, (newValue, oldValue) => {
  // 当 count 发生变化时执行此回调函数
})

实战应用：一个简单的计数器

在以下真实的示例中，我们将使用 watch 和 toRefs 来创建一个简单的计数器应用程序：

<template>
  <div>
    <button @click="incrementCount">+</button>
    <span>{{ count }}</span>
  </div>
</template>

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

export default {
  setup() {
    // 使用 ref 创建一个可变的 count 响应式对象
    const count = ref(0);

    // 使用 toRefs 将 count 转换为普通对象，以便在模板中使用
    const 普通对象 = toRefs(count);

    // 监视普通对象的 count 属性
    watch(普通对象.count, (newValue, oldValue) => {
      // 当 count 发生变化时执行此回调函数
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });

    const incrementCount = () => {
      // 使用 count.value 来更新 count 的值
      count.value++;
    };

    return {
      count,
      普通对象,
      incrementCount
    };
  }
};
</script>