vue2-给data动态添加属性

vue2-给data动态添加属性

1. 问题的来源

  • 在VUe2中(VUE3中使用了proxy,及时动态添加也能实现响应式),如果我们动态给data添加一个属性,会发现视图没有同步更新
  • 举个例子
  • 我们通过v-for遍历data中的一个属性list,生成一系列的div标签
  • 然后有一个按钮,点击按钮增加一个data的属性list的子项,
  • 当我们点击按钮时,会发现并没有多一个div出来
html 复制代码
<div v-for="(item,index) in list">{{item}}</div>
<button @click="addProperty">动态添加属性</button>
<script>
    const app=new Vue({
        data(){
            return{
                list:{
                    name:'tom'
                }
            }
        },
        methods:{
            addProperty(){
                this.list.age=12//为list动态添加新属性
                console.log(this.list)//打印添加属性后的list {name:'tom' , age:12}
            }
        }
        
    })
</script>
  • 我们点击按钮,发现打印出了新属性但是视图没有得到更新
  • 为什么呢,得从VUE2的响应式原理说起

2. 原理分析

  • 在VUE2中,响应式是通过Object.defineProperty来实现的
js 复制代码
const obj={
    name:'tom'
}
Object.defineProperty(obj,'name',{
    get(){
        console.log(`get name ${obj['name']}`)
        return obj['name']
    },
    set(newVal){
        console.log(`set name ${newVal}`)
        obj['name']=newVal
    }
})
  • 当我们访问name(obj.name)或者设置name(obj.name='newVal')的时候,会触发getter和setter
  • 这工作实在VUE实例化的时候做完的
  • 当我们为obj添加新属性的时候,因为新属性错过了响应式化的时机,没有通过Object.defineProperty设置为响应式数据,所以数据改变时,无法通知Watcher去更新视图

3. 解决方案

3.1 Vue.set()

  • 既然是因为错过了响应化时机,那我们就再把新属性响应化一次就行
  • 通过Vue.set向响应式对象中添加一个property,并确保这个新property同样是响应式的额。且出发视图更新
js 复制代码
function set(target:Array<any> | Object,key:any,val:any):any{
    defineReactive(ob.value,key,val)
    ob.dep.notify()
    return val
}

3.2 Object.assign()

  • 直接使用Object.assign添加到对象的新属不会触发更新,需要新建一个对象,合并源对象与混入对象的属性
js 复制代码
this.oldObject=Obejct.assign({},this.onlObject,{newProperty1:1,newProperty2:2,...})

3.3 $forceUpdate

  • 看名字就知道了,强制更新,迫使Vue实例重新渲染,进影响实例本身和插入插槽内容的子组件

4. 总结

  1. 如果要添加少量 的新属性,用Vue.set()
  2. 如果要添加大量的新属性,Object.assign()
  3. 如果你就想然他跟新,那干脆$forceUpdate,但是建议少用
相关推荐
烛阴7 分钟前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子10 分钟前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead35 分钟前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
eggcode40 分钟前
Vue+Openlayers加载OSM、加载天地图
vue.js·openlayers·webgis
前端世界1 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
Xiaouuuuua1 小时前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf
@Dream_Chaser2 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
深耕AI2 小时前
【教程】在ubuntu安装Edge浏览器
前端·edge
倔强青铜三2 小时前
苦练Python第4天:Python变量与数据类型入门
前端·后端·python
倔强青铜三2 小时前
苦练Python第3天:Hello, World! + input()
前端·后端·python