vue3—reactive如何更改属性

Posted 2023-03-21

参考技术A

vue3新增了响应性API，其中数据有两种， ref 和 reactive 。
reactive 支持非原始对象，基础类型不能使用（ Number,Boolean 等）

例1

例2

遇到这样的情况，需要单独赋值
例3

或者使用 Object.assign
例4

案例地址

Vue使用reactive动态改变属性

Vue使用reactive动态改变属性

1.目的

我们的目的是根据某些事件来改变某些属性，从而动态的展示在页面上。

这里如果把属性直接定义为ref是不行的，需要定义为reactive才行。

2.使用

const count = ref(1)
const obj = reactive( count )

// ref 会被解包
console.log(obj.count === count.value) // true

// 会更新 `obj.count`
count.value++
console.log(count.value) // 2
console.log(obj.count) // 2

// 也会更新 `count` ref
obj.count++
console.log(obj.count) // 3
console.log(count.value) // 3

注意当访问到某个响应式数组或 Map 这样的原生集合类型中的 ref 元素时，不会执行 ref 的解包：

同时注意reactive不能直接传基础数据类型，要么传对象，要么传数组。

将一个 ref 赋值给为一个 reactive 属性时，该 ref 会被自动解包：

const count = ref(1)
const obj = reactive()

obj.count = count

console.log(obj.count) // 1
console.log(obj.count === count.value) // true