vue3中使用ref和reative

在vue3中ref和reative(仅仅用于复杂数据类型)都会被用来包装数据类型,使之具有响应性

但是两者在script中引用数值时使用时有一定的不同

ref需要使用.value来访问具体数值,在赋予新数值时只需修改.value即可

reative虽然可以直接访问属性,但赋值的时候需要谨慎考虑,赋值对象需要用reactive进行修饰,不然可能会失去响应性

1
2
3
4
5
6
const a = ref(1.0)
a.value = 2.0 // OK
a = 2.0 // const 会阻止赋值
let b = reactive({a:10}) // 只能是复杂对象
b.a = 20 // OK
b = {a:20} // 失去响应性