Vue3中ref与reactive的赋值

vue3新增的ref与reactive可以为数据提供响应式，二者使用时都需提前引入

ref

ref用于定义基础数据类型
ref定义后，需用.value来对数据进行操作

import { ref } from 'vue'
let msg1 = ref('')
let msg2 = ref('初始值')  // 设定初始值
let msg3 = ref<string>('初始值') // ts指定类型
console.log(msg.value) // '初始值'  获取msg的值需要使用.value

reactive

reactive用于定义复杂数据类型

import { reactive } from 'vue'
let obj1 = reactive({})
let obj2 = reactive({name:'初始值'})  // 设定初始值
let obj3 = reactive<object>({}) // ts指定类型
console.log(obj3) // {name:'初始值'} 打印一个proxy

关于reactive失去响应式的解决方案

1. reactive内部定义属性，将响应式对象作为属性值

import { reactive } from 'vue'
let data = reactive({ obj: {},arr:[]})
data.obj = {name:123}
data.arr = [1,2]

2. 使用ref来定义复杂数据类型
   ref也可用于定义复杂数据类型，其本质上内部也调用了reactive

import { ref } from 'vue'
let obj = ref({})
let arr = ref([])
obj.value = {name:123}
arr.value = [1,2]