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失去响应式的解决方案
- reactive内部定义属性，将响应式对象作为属性值
import { reactive } from 'vue'
let data = reactive({ obj: {},arr:[]})
data.obj = {name:123}
data.arr = [1,2]
- 使用ref来定义复杂数据类型
ref也可用于定义复杂数据类型，其本质上内部也调用了reactive
import { ref } from 'vue'
let obj = ref({})
let arr = ref([])
obj.value = {name:123}
arr.value = [1,2]
