Vue3 开发中常见的问题和解决办法

目录

1. 使用reactive封装基础数据类型

2. 解构reactive对象

3. 使用.value造成的困惑

4. Emitted事件

5. 声明组件选项

6. 使用 Reactivity Transform

7. 定义异步组件

8. template中使用不必要的包装元素

9. 生命周期函数

1. 使用reactive封装基础数据类型

由于reactive只能用于对象，对于基础数据类型（如字符串、数字），应使用ref来创建响应式引用。

import { ref } from 'vue';  const count = ref(0); 

2. 解构reactive对象

直接解构reactive对象会失去响应式。要保持响应式，可以使用toRefs或toRef。

import { reactive, toRefs } from 'vue';  const state = reactive({   count: 0,   text: 'hello' });  const { count, text } = toRefs(state); 

3. 使用.value造成的困惑

在模板中直接使用ref类型的响应式变量无需<