Vue3 Setup的注意点及Watch的监视属性有哪些

Vue3 引入了 Composition API，其中最核心的部分是 setup 函数。setup 函数是 Vue3 组件逻辑的入口，它替代了 Vue2 中的 data、methods、computed 等选项。本文将探讨 setup 函数的使用注意点，并详细介绍 watch 的监视属性。

一、Vue3 Setup 的注意点

1. setup 函数的执行时机

setup 函数在组件实例创建之前执行，因此它无法访问 this。这意味着在 setup 中无法使用 this.$refs、this.$emit 等 Vue2 中常见的操作。取而代之的是，Vue3 提供了 ref、reactive、emit 等函数来处理这些逻辑。

2. setup 函数的返回值

setup 函数必须返回一个对象，该对象中的属性和方法可以在模板中直接使用。例如：

import { ref } from 'vue';

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

    function increment() {
      count.value++;
    }

    return {
      count,
      increment,
    };
  },
};

在上面的例子中，count 和 increment 可以在模板中直接使用。

3. setup 函数的参数

setup 函数接收两个参数：props 和 context。

• props：组件的 props 对象，它是响应式的。
• context：包含 attrs、slots、emit 等属性的上下文对象。

export default {
  props: {
    message: String,
  },
  setup(props, context) {
    console.log(props.message); // 访问 props
    context.emit('custom-event'); // 触发事件
  },
};

4. setup 函数中的生命周期钩子

在 setup 函数中，可以使用 onMounted、onUpdated、onUnmounted 等生命周期钩子函数。这些钩子函数需要在 setup 中显式导入并使用。

import { onMounted } from 'vue';

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

5. setup 函数中的 ref 和 reactive

在 setup 中，通常使用 ref 和 reactive 来创建响应式数据。

• ref：用于创建基本类型的响应式数据，访问时需要 .value。
• reactive：用于创建对象类型的响应式数据，访问时不需要 .value。

import { ref, reactive } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const state = reactive({
      name: 'Vue3',
      version: '3.0.0',
    });

    return {
      count,
      state,
    };
  },
};

二、Watch 的监视属性

watch 是 Vue3 中用于监听响应式数据变化的函数。它可以监听 ref、reactive、computed 等响应式数据的变化，并在变化时执行回调函数。

1. 基本用法

watch 的基本用法如下：

import { ref, watch } from 'vue';

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

    watch(count, (newValue, oldValue) => {
      console.log(`count 从 ${oldValue} 变为 ${newValue}`);
    });

    return {
      count,
    };
  },
};

在上面的例子中，watch 监听 count 的变化，并在变化时执行回调函数。

2. 监听多个数据源

watch 可以同时监听多个数据源，只需将多个数据源放入数组中即可。

import { ref, watch } from 'vue';

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

    watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
      console.log(`count 从 ${oldCount} 变为 ${newCount}`);
      console.log(`name 从 ${oldName} 变为 ${newName}`);
    });

    return {
      count,
      name,
    };
  },
};

3. 深度监听

默认情况下，watch 是浅层监听的，即它只监听对象的第一层属性变化。如果需要监听对象内部属性的变化，可以使用 deep 选项。

import { reactive, watch } from 'vue';

export default {
  setup() {
    const state = reactive({
      user: {
        name: 'Vue3',
        age: 3,
      },
    });

    watch(
      () => state.user,
      (newValue, oldValue) => {
        console.log('user 对象发生变化');
      },
      { deep: true }
    );

    return {
      state,
    };
  },
};

4. 立即执行

默认情况下，watch 只有在监听的数据发生变化时才会执行回调函数。如果希望在组件初始化时立即执行回调函数，可以使用 immediate 选项。

import { ref, watch } from 'vue';

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

    watch(
      count,
      (newValue, oldValue) => {
        console.log(`count 从 ${oldValue} 变为 ${newValue}`);
      },
      { immediate: true }
    );

    return {
      count,
    };
  },
};

5. 监听计算属性

watch 也可以监听计算属性的变化。

import { ref, computed, watch } from 'vue';

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

    watch(doubleCount, (newValue, oldValue) => {
      console.log(`doubleCount 从 ${oldValue} 变为 ${newValue}`);
    });

    return {
      count,
      doubleCount,
    };
  },
};

三、总结

Vue3 的 setup 函数是 Composition API 的核心，它提供了更灵活的方式来组织组件的逻辑。在使用 setup 时，需要注意其执行时机、返回值、参数以及生命周期钩子的使用。watch 是 Vue3 中用于监听响应式数据变化的工具，它可以监听单个或多个数据源的变化，并支持深度监听和立即执行等选项。掌握这些知识点，可以帮助我们更好地使用 Vue3 开发高效、可维护的组件。