vue3 reactive赋值问题
vue3 reactive的坑
清空数组
清空对象
vue3 reactive赋值问题vue3中直接对reactive整个对象赋值检测不到
let obj = reactive({
name: 'zhangsan',
age: '18'
})
obj = {
name: 'lisi'
age: ''
}
// 上面这样赋值检测不到，因为响应式的是它的属性，而不是它自身
// 如需要对 reactive 赋值
// 方法1: 单个赋值
obj['name'] = 'lisi';
obj['age'] = '';
// 方法2：多包一层
let obj = reactive({
data: {
name: 'zhangsan',
age: '18'
}
})
obj.data = {
name: 'lisi'
age: ''
}
vue3 reactive的坑
最近使用vue3的过程中发现reactive有一些问题
清空reactive定义的数组时必须将length设为0，直接赋值一个空数组是没有作用的，同理对象直接赋值一个空对象也没有作用，只能遍历对象一项一项删，这里说的没有作用是不能响应式的更新页面，如果打印一下是能看到确实被删除了，但是页面没有变化
清空数组// 错误示例
<template>
<div>{{ arr }}</div>
<button @click="click">点击</button>
</template>
<script setup>
import { reactive } from 'vue'
let arr = reactive([1, 2, 3])
const click = () => {
arr = []
console.log(arr) // 这里打印的结果是正常的空数组
}
</script>
// 正确示例
<template>
<div>{{ arr }}</div>
<button @click="click">点击</button>
</template>
<script setup>
import { reactive } from 'vue'
let arr = reactive([1, 2, 3])
const click = () => {
arr.length = 0 // 这里和vue2是正好相反，vue2直接将数组length设为0是无效的
console.log(arr)
}
</script>
清空对象
// 错误示例
<template>
<div>{{ obj }}</div>
<button @click="click">点击</button>
</template>
<script setup>
import { reactive } from 'vue'
let obj = reactive({a: 111, b: 222})
const click = () => {
obj = {}
console.log(obj) // 这里打印的结果是正常的空对象
}
</script>
// 错误示例
<template>
<div>
<div>{{ obj }}</div>
<button @click="click">点击</button>
</div>
</template>
<script setup>
import { reactive } from 'vue'
let arr = reactive({a: xxx, b: xxx })
const click = () => {
for (let i in obj) {
delete obj[i]
}
console.log(obj) // 这里打印的结果是正常的空数组
}
</script>
同样的道理直接赋值也不行，数组只能用数组的某些方法，或者直接修改索引，修改索引跟vue2又是相反，vue2只修改索引项没有作用，对象直接使用点语法即可，直接赋一个对象没有作用
这些问题其实只要使用ref就可以解决，但是人官方推荐使用reactive。。。。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。