vue3中ref和reactive,vue3 reactive
本文主要介绍了vue3中的无功分配问题，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
vue3 reactive赋值问题vue3 reactive的坑清空数组清空对象
vue3 reactive赋值问题
在vue3中，不能直接检测整个反应对象的分配。
设obj=reactive({
姓名：张三，
年龄：“18岁”
})
obj={
姓名：“李四”
年龄：“”
}
//上面的赋值是检测不到的，因为响应的是它的属性，不是它本身。
//如有必要，将值赋给reactive
//方法1:单次赋值
obj[ name ]= Lisi ；
obj[ age ]= ；
//方法二：多包一层。
设obj=reactive({
数据：{
姓名：张三，
年龄：“18岁”
}
})
对象数据={
姓名：“李四”
年龄：“”
}
vue3 reactive的坑
最近在使用vue3的过程中发现了一些reactive的问题。
当清空由reactive定义的数组时，长度必须设置为0。直接分配空数组是没有用的。同样，直接将空对象赋给对象也是没有用的。您只能遍历对象并逐个删除它们。这里说的是你不能响应性的更新页面。如果打印出来，可以看到确实被删除了，但是页面没有变化。
清空数组
//错误示例
模板
div{{ arr }}/div
按钮@ Click= Click Click/按钮
/模板
脚本设置
从“vue”导入{ reactive }
设arr=电抗([1，2，3])
const click=()={
arr=[]
Console.log(arr) //这里输出的结果是一个普通的空数组
}
/脚本
//正确示例
模板
div{{ arr }}/div
按钮@ Click= Click Click/按钮
/模板
脚本设置
从“vue”导入{ reactive }
设arr=电抗([1，2，3])
const click=()={
Arr.length=0 //这和vue2正好相反。vue2直接设置数组长度为0是无效的。
console.log(arr)
}
/脚本
清空对象
//错误示例
模板
div{{ obj }}/div
按钮@ Click= Click Click/按钮
/模板
脚本设置
从“vue”导入{ reactive }
设obj=reactive({a: 111，b: 222})
const click=()={
obj={}
Console.log(obj) //这里打印的结果是一个普通的空对象。
}
/脚本
//错误示例
模板
差异
div{{ obj }}/div
按钮@ Click= Click Click/按钮
/div
/模板
脚本设置
从“vue”导入{ reactive }
设arr=reactive({a: xxx，b: xxx })
const click=()={
for(让我在obj中)
删除对象[i]
}
Console.log(obj) //这里输出的结果是一个普通的空数组
}
/脚本
同理，直接赋值也不行。数组只能使用数组的一些方法，或者直接修改索引。修改索引和vue2相反，vue 2只修改索引项，但是对象可以直接使用point语法。直接指定对象没有任何效果。
其实这些问题都可以用ref来解决，但是人家官方推荐用reactive。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。