vue2.7 与 vue3.0 双向绑定失效及解决方法

最新推荐文章于 2024-04-29 10:42:46 发布

weixin_46774564

最新推荐文章于 2024-04-29 10:42:46 发布

阅读量1k

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_46774564/article/details/131263136

版权

vue2.7 与 vue3.0 双向绑定失效及解决方法

reactive

// 赋值新地址（失效）
let obj = reactive({
  name: [],
  age: ''
})
obj = data || {}
// 添加新属性（失效）
obj.xxxx = 'xxxx'
// 通用解决方法
// ref全量覆盖
let obj = ref({
  name: [],
  age: ''
})
obj = data || {}
// vue2.7
import { set } from 'vue'
set(obj, 'xxx', 'xxx')
// vue3.0
// Object.assign 
Object.assign(obj, data)

ref

// 未初始化（失效）（vue3.0无需初始化，双向绑定不失效）
let obj = ref({
  name: []
})
obj.value.age = 18
// vue2.7
// set
import { set } from 'vue'
set(obj.value, 'age', 18)
// 全量覆盖
obj.value = {
  age: 18
}
// or
obj.value = Object.assign({}, obj.value, { age: 18 })