欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue不能watch數(shù)組和對象變化解決方案

 更新時間：2022年11月04日 08:52:47   作者：Krryblog  
這篇文章主要為大家介紹了Vue不能watch數(shù)組和對象變化解決方案示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

Vue 能監(jiān)聽數(shù)組的情況

Vue 監(jiān)聽數(shù)組和對象的變化（vue2.x）

vue 實際上可以監(jiān)聽數(shù)組變化，比如：

直接 = 賦值

data () {
  return {
    watchArr: [],
  };
},
watch: {
  watchArr (newVal) {
    console.log('監(jiān)聽：' + newVal);
  }
},
created () {
  setTimeout(() => {
    this.watchArr = [1, 2, 3];
  }, 1000);
},

再如使用 splice(0, 2, 3) 從數(shù)組下標 0 刪除兩個元素，并在下標 0 插入一個元素 3：

data () {
  return {
    watchArr: [1, 2, 3],
  };
},
watch: {
  watchArr (newVal) {
    console.log('監(jiān)聽：' + newVal);
  }
},
created () {
  setTimeout(() => {
    this.watchArr.splice(0, 2, 3);
  }, 1000);
},

push、unshift、pop 數(shù)組也能夠監(jiān)聽到

Vue 無法監(jiān)聽數(shù)組變化

但是，數(shù)組在下面兩種情況無法監(jiān)聽：

利用索引直接設(shè)置一個數(shù)組項時，例如：arr[indexOfItem] = newValue;

修改數(shù)組的長度時，例如：arr.length = newLength;

舉例無法監(jiān)聽數(shù)組變化的情況

利用索引直接修改數(shù)組值

data () {
  return {
    watchArr: [{
      name: 'krry',
    }],
  };
},
watch: {
  watchArr (newVal) {
    console.log('監(jiān)聽：' + newVal);
  }
},
created () {
  setTimeout(() => {
    this.watchArr[0].name = 'xiaoyue';
  }, 1000);
},

修改數(shù)組的長度

長度大于原數(shù)組就將后續(xù)元素設(shè)置為 undefined

長度小于原數(shù)組就將多余元素截掉

data () {
  return {
    watchArr: [{
      name: 'krry',
    }],
  };
},
watch: {
  watchArr (newVal) {
    console.log('監(jiān)聽：' + newVal);
  }
},
created () {
  setTimeout(() => {
    this.watchArr.length = 5;
  }, 1000);
},

上面的 watchArr 變成

Vue 無法監(jiān)聽數(shù)組變化的解決方案

this.$set(arr, index, newVal);
data () {
  return {
    watchArr: [{
      name: 'krry',
    }],
  };
},
watch: {
  watchArr (newVal) {
    console.log('監(jiān)聽：' + newVal);
  }
},
created () {
  setTimeout(() => {
    this.$set(this.watchArr, 0, {name: 'xiaoyue'});
  }, 1000);
},

使用數(shù)組 splice 方法可以監(jiān)聽，例子上面有

使用臨時變量直接賦值的方式，原理與直接賦值數(shù)組一樣

data () {
  return {
    watchArr: [{
      name: 'krry',
    }],
  };
},
watch: {
  watchArr (newVal) {
    console.log('監(jiān)聽：' + newVal);
  }
},
created () {
  setTimeout(() => {
    let temp = [...this.watchArr];
    temp[0] = {
      name: 'xiaoyue',
    };
    this.watchArr = temp;
  }, 1000);
},

Vue 監(jiān)聽對象

Vue 可以監(jiān)聽直接賦值的對象

this.watchObj = {name: 'popo'};

但是 Vue 不能 直接 監(jiān)聽對象屬性的添加、修改、刪除

Vue 設(shè)置監(jiān)聽對象

使用this.$set(object, key, value)、this.$delete(object, key)

使用深度監(jiān)聽 deep: true，只能監(jiān)聽原有屬性的變化，不能監(jiān)聽新增、刪除的屬性

mounted () {
  // 這里使用深度監(jiān)聽 blog 對象的屬性變化，會觸發(fā) getCatalog 方法
  this.$watch('blog', this.getCatalog, {
    deep: true
    // immediate: true // 是否第一次觸發(fā)
  });
},

watch: {
  obj: {
    // 這里深度監(jiān)聽變化，直接觸發(fā)下面方法
    handler(curVal, oldVal) {
      // TODO
    },
    deep: true,
    immediate: true // 是否第一次觸發(fā)
  }
}

使用this.$set(obj, key, val)來新增屬性，this.$delete(object, key)來刪除屬性

無法使用 this.$set 監(jiān)聽修改原有屬性；可以使用深度監(jiān)聽 deep: true，可以直接以 obj.key 的方法來設(shè)置原有屬性

this.$set(this.watchObj, 'age', 124);
this.$delete(this.watchObj, 'age')

delete this.watchObj[‘name']//（Vue 無法監(jiān)聽 delete 關(guān)鍵字來刪除對象屬性）

使用 Object.assign 方法，直接賦值的原理監(jiān)聽（最推薦的方法）

this.watchObj = Object.assign({}, this.watchObj, {
  name: 'xiaoyue',
  age: 15,
});

直接 watch obj.key 監(jiān)聽某個值的變化

watch: {
  'obj.name'(curVal, oldVal) {
    // TODO
  }
}

以上就是Vue不能watch數(shù)組和對象變化解決方案的詳細內(nèi)容，更多關(guān)于Vue watch數(shù)組對象變化的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論