vue3 setup 实用知识点与相关项目实践问题解决

在Vue 3中，setup函数是一个新特性，它是组件内使用Composition API的入口点。以下是一些在实际项目中使用setup函数的实用技巧和解决方案：

1. 使用reactive或ref定义响应式数据。
2. 使用computed创建计算属性。
3. 使用watch来监听响应式数据的变化。
4. 使用onMounted和onUnmounted生命周期钩子处理挂载和卸载逻辑。
5. 使用provide和inject实现依赖注入。
6. 使用emit发射自定义事件。

以下是一个简单的setup函数示例，展示了如何定义响应式数据、计算属性和监听器：

import { reactive, computed, watch, onMounted, ref } from 'vue';
 
export default {
  setup() {
    // 使用reactive定义多个响应式数据
    const state = reactive({
      count: 0,
      message: 'Hello Vue 3'
    });
 
    // 使用computed创建一个计算属性
    const doubleCount = computed(() => state.count * 2);
 
    // 使用watch监听响应式数据的变化
    watch(
      () => state.count,
      (newValue, oldValue) => {
        console.log(`count changed from ${oldValue} to ${newValue}`);
      }
    );
 
    // 挂载时执行的逻辑
    onMounted(() => {
      console.log('Component is mounted');
    });
 
    // 返回响应式数据和计算属性，供模板使用
    return {
      state,
      doubleCount
    };
  }
};

在这个例子中，我们定义了一个响应式对象state和一个计算属性doubleCount。我们还使用watch监听state.count的变化，并在组件挂载时执行了一些逻辑。最后，我们返回了state和doubleCount，使它们可以在组件的模板中使用。