关于 vue3 reactive 重新赋值的问题
问题:一个带默认值的数组,每次更新数据都重置该数组到原始状态, 之后push新值到list中,见以下代码:import { reactive, ref } from 'vue'export default {setup() {// 需要一个带默认值的数组list;let list = reactive([{id: 1, name: 'Andy'}])// 每次触发事件重置list,把新值放入,此种
·
问题:一个带默认值的数组,每次更新数据都重置该数组到原始状态, 之后push新值到list中,见以下代码:
import { reactive, ref } from 'vue'
export default {
setup() {
// 需要一个带默认值的数组list;
let list = reactive([{id: 1, name: 'Andy'}])
// 每次触发事件重置list,把新值放入,此种方式不会触发视图更新
const checkBtn = () => {
// 此时重置操作 地址指向变成一个新的地址,不会触发视图更新
list = [{id: 1, name: 'Andy'}]
list.push({id: 2, name: 'Lucy'})
}
// --------------------------------------------------
// 正确的重置处理方法如下:使用reactive将数组包裹到一个对象中
let list = reactive({
data: [{id: 1, name: 'Andy'}]
});
const checkBtn = () => {
list.data = [{id: 1, name: 'Andy'}]
list.data.push({id: 2, name: 'Lucy'})
}
// 或者使用ref
let list = ref([{id: 1, name: 'Andy'}]);
const checkBtn = () => {
list.value = [{id: 1, name: 'Andy'}]
list.value.push({id: 2, name: 'Lucy'})
}
return {
list,
checkBtn
}
},
}
更多推荐
已为社区贡献4条内容
所有评论(0)