• vue中怎样动态添加属性


    <button @click="addObjB"></button>
    data:{
        obj:{
            a:''
        }
    }
    
    methods:{
        addObjB(){
            this.$set(this.obj,'b',111)
        }
    }
    Vue数组、对象改变视图不更新:

    第一种情况:

    基本数据类型和对象:实例化的时候如果没有被加入到data中,那么它就不是响应式属性,这时要添加新的根级响应式属性,可以使用

    this.$set(this.obj, key , value); //添加一个属性
    
    this.obj=Object.assign({},this.obj,{a:1,b:2}); //添加多个属性,必须要创建一个新的对象,让它包含原对象的属性和新的属性

    第二种情况:

    数组(直接用索引值给数组某一项赋值;或者修改数组的长度)

    var vm=new Vue({
        data:{
            list:['a','b','c']
        }
    });
    vm.list[1]='x'; //不是响应式的
    vm.list.length=0; //不是响应式的
    
    vm.$set(vm.list,1,'x') //响应式的
    vm.list.splice(1,1,'x') //响应式的
    
    splice(index,howmany,newValue1,newValue2)//
    解决方法:

    1、this.$set(obj,obj.b,value) (手动的去把obj.b处理成一个响应式的属性)

    2、this.$forceUpdate() //强制刷新视图,适用于数据层次太多的情况

    3、this.$nextTick(function(){ }); //回调函数会在dom更新完后就会调用

     

    Vue3.0 Object.defineProperty=>Proxy

    Proxy:对象用于定义基本操作的自定义行为(如属性查找、赋值、枚举、函数调用等)

    优点:比 Object.defineProperty有更丰富的api,更灵活

    缺点:兼容性没那么好。

  • 相关阅读:
    程序开发
    主方法
    日志
    node.js
    二维互换
    前台打断点
    具体的后台断点快捷键
    Jenkins
    断点
    循环
  • 原文地址:https://www.cnblogs.com/annie211/p/12654177.html
Copyright © 2020-2023  润新知