一般情况下vue3有两种定义模板数据的方式
ref和reactive，但是何时使用ref？何时使用reactive？
总结：
当变量为Object时适合使用reactive来定义
当变量为数组的适合，根据情况而定，如果数组内容赋值后不变动，很适合用reactive，比如从接口请求到的下拉选项，字典
如果数组内容会根据某些情况变动，就适合用ref，比如分页表格，当然，用reactive也可以，但是会想要修改渲染后的数据稍显麻烦
其他如数字，字符串，boolean等要用ref
如下：
let reactiveArray: any = reactive([])
let reaciveObject: any = reactive({})
setTimeout(() => {
// 想要修改reactive的数组，需要用push+展开运算
// reactiveArray.push(...[{ a: 1, b: 2 }])
// 像这种直接赋值，是无法将数据渲染到页面的，打印出来还是 []
// reactiveArray = [{ a: 1, b: 2 }]
// 如果reactive是对象，可以直接赋值一个字段，并且同步更新，有点像 $set(object, 'a', 1)
reaciveObject.a = 1
}, 1000)
那么我不想用ref，觉得每次赋值value很奇怪（其实没什么，习惯就好）
xxx.value = [x, x, x]
怎么办
// 如果用reactive要写两行，先清除，再push，好像更麻烦了
reactiveArray.length = 0
reactiveArray.push(...[{ a: 3, b: 4 }])
