美文网首页
Vue中数组 对象数据更新检测

Vue中数组 对象数据更新检测

作者: 皇甫圣坤 | 来源:发表于2019-03-11 11:55 被阅读0次

1.数组更新检测

    this.arr[3] = "aaa"  // 不能触发视图更新
    Vue.set(this.arr,3,'aaa')  //可以触发视图更新
    this.arr.splice(1,0,'ccc')  //可以触发视图更新
    this.arr.splice(1,1,'ccc')  //可以触发视图更新
    vm.$set(this.arr,3,'aaa')  //可以触发视图更新
     this.arr = [...this.arr,'sss']

2.对象更新检测

  // 添加一个新属性
      this.obj.color = 'green' // 不会引起视图更新(重新渲染)
      Vue.set(this.obj,"color","green")   //有用
      vm.$set(this.obj,"color","green")  //有用
      this.$set(this.obj,"color","green")  //有用
       或者使用扩展运算符换成新的对象
      this.obj = {新属性:值,..this.obj}
    //修改属性
      this.obj.name = 'John'  //有用
    // 删除属性
    delete  this.obj.age  //不更新
    this.$delete(对象,‘属性’) //更新视图
    Vue.delete(对象,‘属性’) //更新视图
   

相关文章

网友评论

      本文标题:Vue中数组 对象数据更新检测

      本文链接:https://www.haomeiwen.com/subject/aqvvpqtx.html