vue3 reative 与ref的区别、应用场景和如何选择

Vue3中的reactive和ref都是响应式数据的实现方式，但是它们的应用场景和使用方式是不同的。

1. 区别：

- reactive：用于创建响应式的对象和嵌套对象，可以通过监听对象属性的变化来触发视图更新。
- ref：用于创建基本类型的响应式数据，如数字、字符串、布尔值等，可以通过调用.value属性来获取和设置值，也可以通过监听.value属性的变化来触发视图更新。

2. 应用场景：

- reactive：适用于需要监听对象属性变化的场景，如表单数据、状态管理等。
- ref：适用于需要监听基本类型数据变化的场景，如计数器、开关等。

3. 如何选择：

- 如果需要监听对象属性的变化，则使用reactive。
- 如果只需要监听基本类型数据的变化，则使用ref。

需要注意的是，ref可以通过.value属性获取和设置值，但是在模板中使用时不需要加上.value，而在JavaScript中使用时需要加上.value。而reactive则直接使用对象即可，无需加上.value。