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 } = toRef