开发者社区> 问答> 正文

vue 更新数组时触发视图更新的方法

vue 更新数组时触发视图更新的方法

展开
收起
问问小秘 2019-11-22 16:00:09 1308 0
1 条回答
写回答
取消 提交回答
  • 1.Vue.set 可以设置对象或数组的值,通过 key 或数组索引,可以触发视图更新

    image.png

    2.Vue.delete 删除对象或数组中元素,通过 key 或数组索引,可以触发视图更新

    image.png

    3.3.数组对象直接修改属性,可以触发视图更新

    this.array[0].show = true;
    this.array.forEach(function(item){
        item.show = true;
    });
    
    

    4.splice 方法修改数组,可以触发视图更新

    this.array.splice(indexOfItem, 1, newElement)
    
    

    5.数组整体修改,可以触发视图更新

    var tempArray = this.array;
    tempArray[0].show = true;
    this.array = tempArray;
    

    6.用 Object.assign 或 lodash.assign 可以为对象添加响应式属性,可以触发视图更新

    //Object.assign的单层的覆盖前面的属性,不会递归的合并属性
    this.obj = Object.assign({},this.obj,{a:1, b:2})
    
    //assign与Object.assign一样
    this.obj = _.assign({},this.obj,{a:1, b:2})
    
    //merge会递归的合并属性
    this.obj = _.merge({},this.obj,{a:1, b:2})
    

    7.Vue 提供了如下的数组的变异方法,可以触发视图更新

    push()
    pop()
    shift()
    unshift()
    splice()
    sort()
    reverse()
    
    2019-11-22 16:16:33
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
Vue.js 在前端服务化上的探索与实践 立即下载
Vue.js在前端服务化上的实践与探索 立即下载
利用编译将 Vue 组件转成 React 组件 立即下载