<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创建