vue3监听setup写法

在 Vue 3 中，你可以在 setup 函数中使用 onMounted 方法来监听一个组件的挂载。例如：

import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载')
    })
  }
}

onMounted 方法接收一个回调函数，该回调函数会在组件挂载完成后被调用。

注意：在 Vue 3 中，不再有生命周期钩子，所以你不能使用 `mounted` 钩子来监听组件挂载。

相关问题

vue3watch监听写法

在Vue 3中，`watch` API用于监听响应式数据的变化。它的基本用法如下：

// 创建一个计算属性，并使用 watch 监听其值的变化
export default {
  setup() {
    // 定义一个计算属性
    const count = computed(() => this.value * 2);

    // 使用 watch 注册监听器
    watch(
      // 第一个参数是要监听的对象或表达式
      count,
      // 第二个参数是回调函数，当 `count` 改变时会被调用
      (newCount) => {
        console.log(`计数已更新，新值：`, newCount);
      },
      // 可选的第三个参数是一个选项对象，可以配置如 deep、immediate 等特性
      { deep: true } // 如果你想监听嵌套对象的改变，设为 true
    );

    return { count };
  }
}

- `deep` 参数默认为 false，表示浅比较；如果设置为 true，则会进行深度监听，即使内部对象结构改变也能够触发回调。
- `immediate` 参数默认为 false，如果设置为 true，会在首次创建实例时立即执行回调。

当你修改`this.value`时，`count`会重新计算并调用监听器，显示新的值。

vue3 setup watch写法

在Vue 3中，`setup` 函数是组件的新特性，它提供了一个更简洁的方式来声明式地管理组件内的响应式数据。当你需要监听某个数据的变化并在变化时执行某些操作时，可以使用 `watch` 方法。

`watch` 的基本语法如下：

import { watch } from 'vue';

setup() {
  // 定义一个局部变量或计算属性
  const currentValue = ref('initial value');

  // 使用 watch 创建一个观察者
  watch(
    // 要监视的数据源，可以是表达式、函数返回值或直接的对象属性
    (currentValue) => currentValue, 
    // 当数据源改变时执行的回调函数
    (newVal) => {
      console.log(`当前值已更新为: ${newVal}`);
    },
    {
      // 可选参数，例如 deep 是否深度监听，默认为 false
      deep: false,
      // 或者 immediate 是否立即执行一次回调，默认为 false
      immediate: true
    }
  );
}