vue3的reactive赋值
可乐姜汁 人气:32vue3 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。。。。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容