常用知识碎片 Vue3 ref和reactive （内含其他常用知识）

常用知识碎片 Vue3 ref和reactive （内含其他常用知识）
目录

ref和reactive

ref

reactive

总结：

setup语法糖

语法糖是啥？

Vue3 setup语法糖

Vue3 不使用setup语法糖示例：

Vue3 使用setup语法糖示例：

ref和eative主要区别

ref和reactive

在 Vue 3 中，ref 和 reactive 是用于创建响应式数据的不同方法，它们主要用于不同的场景：
ref
- 主要用于创建基本类型的响应式引用，例如字符串、数字或布尔值。
- ref 返回的是一个具有 .value 属性的对象，实际使用的通常是这个 .value。
- 当你想要在模板中直接绑定或在计算属性中使用时，ref 非常有用。
创建响应式对象：

ref 方法创建一个响应式对象，它会跟踪对象的属性变化，并在这些变化发生时触发视图更新。要使用 ref 方法，您需要将一个对象作为参数传递给它，然后它将返回一个响应式对象。
示例：
```
import { ref } from 'vue';
 
const count = ref(0);
 
count.value++; // 触发视图更新
```
reactive
- 用于创建复杂对象或数组的响应式引用，它不会包裹返回值，而是直接返回原始对象或数组。
- 当你有一个复杂的对象结构并且希望整个对象都是响应式的时，使用 reactive 更加合适。
创建响应式对象和代理对象：

reactive 方法创建一个响应式对象和一个代理对象。代理对象会跟踪对象的属性变化，并在这些变化发生时触发视图更新。要使用 reactive 方法，您需要将一个对象作为参数传递给它，然后它将返回一个响应式对象和一个代理对象。
示例：
```
import { reactive } from 'vue';
 
const state = reactive({
  count: 0,
});
 
state.count++; // 触发视图更新
```
小总结：
- ref 创建一个响应式对象，它会跟踪对象的属性变化，并在这些变化发生时触发视图更新。
- reactive 创建一个响应式对象和一个代理对象，代理对象会跟踪对象的属性变化，并在这些变化发生时触发视图更新。
以上示例代码都是 Vue3 中不使用语法糖

ref和reactive

ref

reactive

小总结：