vue3中ref 和 reactive的简单了解

<script lang="ts" setup>
import { ref, reactive } from "vue";
const num = ref(0);
const obj1 = ref({ value: 1 });
const num2 = reactive(0) // 直接提示错误，建议Object 类型
const obj2 = reactive({ value: 1 });

console.log("num :>> ", num);
// RefImpl{_shallow: false, dep: undefined, __v_isRef: true, _rawValue: 0, _value: 0}
console.log("obj1 :>> ", obj1);
// RefImpl{_shallow: false, dep: undefined, __v_isRef: true, _rawValue: {…}, _value: Proxy}
console.log("obj2 :>> ", obj2);
// Proxy{value: 1}

总结

• ref 和 reactive 都可以创建响应式变量
• ref 可以创建简单类型和复杂类型的变量，在创建复杂类型变量的时候，只是先用reactive创建，再次包裹一下
• reactive 创建简单变量时，提示错误。推荐创建object类型。

简单类型数据使用ref创建，复杂类型数据使用reactive创建