Vue3 的 setup API：不可忽视的两个注意点

前端

2023-12-03 16:41:39

深入理解 Vue.js 3 中 setup 函数的执行时机和参数

Vue.js 3 引入了 setup 函数，为响应式状态管理和逻辑复用提供了强大的机制。理解 setup 函数的执行时机和参数对于充分利用其优势至关重要。

setup 函数的执行时机

setup 函数有两个执行时机：

组件创建时： 初始化组件状态和方法。
依赖项更新时： 当 setup 函数中使用的 props、状态或上下文等响应式依赖项发生变化时。

理解执行时机有助于优化组件性能。例如，如果一个方法仅依赖于创建时数据，可以将其移出 setup 函数，避免不必要的重新渲染。

setup 函数的参数

setup 函数接收两个参数：

props： 组件接收的 props 对象。
context： 提供对其他组件状态和方法的访问，包含以下属性：
- attrs：非响应式属性对象。
- slots：接收的插槽对象。
- emit：向父组件发出事件的方法。
- root：指向根 Vue 实例的引用。
- parent：指向父组件实例的引用。

理解参数对于正确管理组件状态和逻辑至关重要。例如，可以使用 context 对象访问父组件状态或向父组件发出事件，实现更灵活、可复用的组件。

代码示例

<script setup>
  // 状态
  const count = ref(0);

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

  // 监听 prop 变化
  watch(() => props.someProp, () => { /* prop 变化后的逻辑 */ });
</script>

<template>
  <button @click="increment">Increment</button>
  <p>{{ count }}</p>
</template>