Vue listens for changes in arrays and objects

Listening to the array

1 directly assigns the value

data() {
    return {
      watchArr: []
    };
  },
  watch: {
    watchArr(newVal) {
      console.log("Monitor:"+ newVal); }},created() {
    this.watchArr = [1, 2, 3];
  },
Copy the code

Use splice(0, 2, 3) to delete two elements from array 0 and insert element 3 at index 0

  data() {
    return {
      watchArr: [1, 2, 3],
    };
  },
  watch: {
    watchArr(newVal) {
      console.log("Monitor:"+ newVal); }},created() {
    this.watchArr.splice(0, 2, 3);
  },
Copy the code

The 3 push array can also be listened on

  • Cannot listen for array changes

    However, arrays cannot be listened in two cases:

    When setting an array item directly using an index, for example, arr[indexOfItem] = newValue; To change the length of an array, for example, arr.length = newLength; Example of a situation where you cannot listen for an array change

    1 Modify the array value directly using the index

      data() {
    return {
      watchArr: [
        {
          name: "krry"}}; }, watch: { watchArr(newVal) { console.log("Monitor:"+ newVal); }},created() {
    this.watchArr[0].name = "xiaoyue";
  },
Copy the code

    2 Change the length of the array

    If the length is greater than the original array, the subsequent element is set to undefined. If the length is less than the original array, the redundant element is cut offCopy the code
        data() {
    return {
      watchArr: [
        {
          name: "krry"}}; }, watch: { watchArr(newVal) { console.log("Monitor:"+ newVal); }},created() {
    this.watchArr.length = 5;
  },
Copy the code

  • A solution that cannot listen for array changes

1 this.$set(arr, index, newVal); Splice (); splice (); splice ()Copy the code
      data() {
        return {
          watchArr: [
            {
              name: "krry"}}; }, watch: { watchArr(newVal) { console.log("Monitor:"+ newVal); }},created() {
        let temp = [...this.watchArr];
        temp[0] = {
          name: 'xiaoyue'}; this.watchArr = temp; },Copy the code

Listening to the object

However, Vue cannot listen for object attributes to be added, modified, or deleted

  • Listen to the object’s resolution

    1 Use this.set(obj, key, val) to add new attributes (Vue cannot listen on this.set to modify existing attributes) 2 Use deep: true to listen on existing attributes, not added attributes

Handler (curVal, oldVal) {// TODO}, deep:true,
           immediate: true// Whether it is the first time}}Copy the code
3. Use object. assign method to monitor the principle of direct assignment (the most recommended method)Copy the code
     this.watchObj = Object.assign({}, this.watchObj, {
        name: 'xiaoyue',
        age: 15,
     });
Copy the code
4 Watch obj.key to monitor the change of a valueCopy the code
    watch: {
      'obj.name'(curVal, oldVal) {
        // TODO
      }
    }
Copy the code

Vue cannot watch array changes and object changes