前端大杂烩

何时使用ref?何时使用reactive?

2022-11-24  本文已影响0人  写写而已

一般情况下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 }])
上一篇下一篇

猜你喜欢

热点阅读