1, v-for

1. Update monitoring

In general, changes in data will lead to v-for update, but in some cases, such as array method filter, it will return a new array, or directly change the value of the array in a literal way, which will not lead to v-for update. In such cases, reassignment or this.$set() or Vue.set() methods can be used

// v-for update
// Changing the method of the original array will lead to v-for update, but generating a new array or directly changing the literal array will not lead to v-for update
import vue from "vue";
export default {
  data() {
    return {
      arr: [1, 12, 3, 4, 5, 6, 7, 8, 9, 0],
      newarr: [],
    };
  },
  methods: {
    btn() {
      //1. Re assignment method, v-for new array
      this.newarr = this.arr.filter((item) => item < 10);
      //2.this.$set()
      this.$set(this.newarr, 0, 100);
      //3.Vue.$set()
      vue.set(this.newarr, 1, 200);
    },
  },
};

2, v-for local update and key

When v-for is updated, it does not change the whole DOM, but compares two segments, reuses labels and updates in place

This update method can improve performance, but it is not the most perfect

Use a unique and non repeated value as the key. Once the id value is used, v-for detects the change of the target structure, it will prepare a new set of dom structure for comparison with the original one, replace it with differences and reuse it without differences, so as to improve the performance best

3, Dynamic class

<p :class="{ col: true }">I am class Attribute dynamic generation</p>
<!-- :class="{Class name:Boolean value}" Boolean value is true,Class name enabled,by false,Disabled -->

4, Dynamic style

<p :style = "{ color: isred, backgroundColor: ispink, fontSize: num }">dynamic style</p>
<!-- :style = "{Attribute name:Attribute value}"  -->

5, vue calculated attribute computed

Function: one variable is calculated by relying on another variable

Note: 1. Both calculation attribute and data attribute are variables and cannot have duplicate names

            2. If the variable in the function changes, the calculation attribute will also change

            3. return must be added to the calculation attribute

Syntax:

/* 
computed:{
  It is also a variable name, so it cannot have the same name as the variable in data
  Calculated attribute name (){
    The return value must be used for this calculation attribute
  }
}
*/
export default {
  data() {
    return {
      a: 10,
      b: 20,
    };
  },
  computed: {
    num() {
      return this.a + this.b;
    },
  },
};

6, Cache of vue calculation properties

Calculation properties are cached based on the value results of their dependencies. As long as the dependent variables remain unchanged, the results are directly fetched from the cache

export default {
  data() {
    return {
      message: "hello,vue",
    };
  },
  computed: {
    reverseMessage() {
      console.log("Calculation properties");
      return this.message.split("").reverse().join("");
    },
  },
  methods: {
    getMessage() {
      console.log("Contrast function");
      return this.message.split("").reverse().join("");
    },
  },
};

Multiple comparisons are called as follows:

 <div>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ getMessage() }}</p>
    <p>{{ getMessage() }}</p>
    <p>{{ getMessage() }}</p>
  </div>

The calculated attribute will be executed only once, and the subsequent values will be taken from the cache, while the function will be executed every call, wasting memory

7, Complete writing of calculated attributes

Syntax:

computed: {
    "Attribute name": {
        set(value){
            
        },
        get() {
            return "value"
        }
    }
}

The calculation attribute is generally used with v-model, and the set() function is used to receive the value

8, vue listener watch

Listen for changes in the value of the data/computed attribute, and call when listening for changes

watch: {
    "The name of the property being listened on" (newVal, oldVal){ 
     //The execution function is defined here       
    }
}

Two parameters can be passed:

newval: current value

oldval: previous value

These two are formal parameters and can be defined at will

9, Deep listening of vue listener

When you need to listen to complex types of data, you should turn on the deep listening mode deep:true

watch: {
    "Property name to listen on": {
        deep: true, // Deep listening changes within complex types
        handler (newVal, oldVal) {
          //The functions to be executed are defined here  
        }
    }
}

handler() fixed method trigger function

Thinking: (if you have an answer, you can write it in the comment area. There is no reward for writing it, ha ha ha)

1. Why do Vue key s generally use IDS instead of indexes?

2. Why sometimes the array is updated, but v-for does not render?

ps: interested partners can write the comment area on the answer. The answer will be published in the next issue. It will be continued