1. The Vue

1.0_vUE basic V-for update monitoring

What methods do not result in v-for updates? Why is that?

• Because the method that operates on the array does not modify the original array, v-for will not detect this
• Solution: Reassign the new array to the original array

Note: V-for is automatically updated whenever the original array changes

When an element in an array is updated, v-for cannot detect it

• Rarely encountered during development

Return to redraw

Reflow: Triggered by changes in the element’s width, height, position, structure, etc.

Repaint: Repaint is triggered when information such as the color of an element changes

For example, backflow is an update triggered by changes in element geometry information, such as width, height, position and so on. Redrawing includes all page rerendering, such as color changes. Backflow will definitely trigger redrawing, while redrawing will not necessarily trigger backflow. In general, we want to minimize redrawing and backflow to improve browser rendering performance by reducing DOM manipulation and submitting multiple DOM manipulations at a time using a documentFragment, or using an MVVM framework, such as: Vue, React, Angular, etc., all have an internal virtual DOM to improve rendering performance.

Backflow must trigger redrawing, but redrawing does not necessarily trigger backflow.

These methods trigger array changes, which v-for detects and updates the page

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

These methods do not trigger v-for updates

• slice()
• filter()
• concat()

1.2V-for in-place updates

The default behavior for V-for is to try to modify elements in place rather than move them.

This virtual DOM comparison approach can improve performance – but not by enough

1.3 virtual dom

The tags written in the template in the.vue file are all templates, which must be processed by vue into virtual DOM objects before being rendered and displayed on the real DOM page

What is the virtual DOM in Vue? Why use the virtual DOM?

The virtual DOM in Vue is essentially a JS object, which is used to save the key information of the DOM. When DOM needs to change, diFF algorithm will be compared to find the updated part. Differential update can greatly improve performance and reduce the frequency of DOM operation.

1.4 the diff algorithm

Vue uses Diff algorithm to compare the new virtual DOM with the old virtual DOM

Case 1: Root element changed, delete rebuild

Case 2: Root element does not change, attribute changes, == element reuse ==, attribute updates

1.5 the diff – key algorithm

Case 3: The root element does not change, the child element does not change, and the element content changes

None key – Updates in place

V-for doesn’t move the DOM, it tries to reuse, update in place, and if you need v-for to move the DOM, you need to use special attribute keys to provide a sort hint

1.6 v – for the key attribute

The key role

• Improved rendering performance
• Bind data and elements to each other

The key requirement

• A unique string or number

Bottom line: Not using a key doesn’t affect functionality (in-place updates), and adding a key can improve update performance

For example, if the key is not used, there are two small problems: 1. V-for uses in-place update, which is slightly weaker, 2. The data is not associated with the structure. If there are components with state in the element, the state is lost. If there is a key, the V-for update compares the key and the content follows the element, further reducing DOM manipulation. Key must be set to a unique string or number.

1.7 dynamic class

• Grammar:
  • :class=”{class name: Boolean}”

1.8 dynamic style

grammar

• :style=”{CSS properties: values}”

<template>
  <div>
    <! -- syntax: :class="{class name: Boolean}"
    <p :class="{ red_str: bool }">For a long time</p>
    <p :class="{ red: 1 > 0 }">For a long time</p>
    <button @click="btn">discoloration</button>
    <br />
    <p :style="{ color: 'red' }">Is tired of learning</p>
    <p :style="{ color: red }">Is tired of learning</p>
    <p :style="{ color: red, backgroundColor: 'blue' }">Is tired of learning</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        bool: true.red: "red"}; },methods: {
      btn() {
        this.bool = !this.bool; ,}}};</script>

<style>
  .red_str {
    color: red;
  }
</style>
Copy the code

Filter 2.

2.1 the filter

Filter application scenarios?

• ** Filters are often used to format text, such as dates; Filters can be used in two ways: interpolation and v-bind property binding

Use: In interpolation or v-bind Syntax: You can use more than one filter by piping the filter name

{ { msg | reverse; }}Copy the code

1. Global registries are best registered in main.js, with one registries used everywhere

// One registration is used everywhere
// Parameter 1: filter name
// Parameter 2: function
Vue.filter("reverse".(val) = > val.split("").reverse().join(""));
Copy the code

2. Local filters are defined in the Filters attribute in the VUE file

<template>
  <div>
    <p>{{MSG}}</p>
    <! - 2. Filters using syntax: {{value | filter name}} - >
    <p>Using reverse filter: {{MSG | reverse}}</p>
    <p :title="msg | toUp">The mouse long stop</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: "Hello, Vue"}; },// Mode 2: local - filter
    // Only in the current vue file
    /* Filters: {filter name (val) {return value}} */
    filters: {
      toUp(val) {
        returnval.toUpperCase(); ,}}};</script>
Copy the code

2.2 Filtering parameters

Grammar:

• Filter and ginseng: vue variable | filter (arguments)
• Multiple filters: vue variable filter filter | 1 | 2

Vue.filter("reverse".(val, s) = > val.split("").reverse().join(s));
Copy the code

<template>
  <div>
    <p>{{MSG}}</p>
    <! - 1. To filter by value syntax: | vue variable filter name (value) - >
    <! - divided by | after joining together -- -- >
    <p>Using reverse filter: {{MSG | reverse (" | ")}}</p>
    <! - 2. Multiple filtering, use the syntax: vue variable filter filter | 1 | 2 - >
    <p :title="msg | toUp | reverse('|')">The mouse long stop</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello, Vue"}; },// Mode 2: local - filter
  // Only in the current vue file
  /* Filters: {filter name (val) {return value}} */
  filters: {
    toUp(val) {
      returnval.toUpperCase(); ,}}};</script>
Copy the code

3vue Calculates attributes

3.1 Computing Properties – Computed

Function: The value calculated by relying on other variables will be updated in real time when the target of the dependency changes, with caching. After updating once, it will be cached, and will not be executed many times, resulting in performance waste

Grammar:

computed: {   
    "Calculate attribute name" () {     
        return "Value"}}Copy the code

Usage:

<template>
  <div>
    <p>{{ num }}</p>
  </div>
</template>
<script>
export default {
  data(){
    return {
      a: 10.b: 20}},// Note: Both the computed property and the data property are variables - not the same name
 // Note 2: If a variable changes within the function, the result will be automatically recalculated
  computed: {
    num(){
      return this.a + this.b
    }
  }
}
</script>

<style>

</style>
Copy the code

3.2 Calculating properties – caching

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

<script>
export default {
  data(){
    return {
      msg: "Hello, Vue"}},// Calculate attribute advantages:
  / / cache
  // After the function is executed, the return value is cached
  // The dependencies remain unchanged, and multiple calls are taken from the cache
  // If the value of a dependency changes, the function is "automatically" re-executed - and the new value is cached
  computed: {
    reverseMessage(){
      console.log("Calculated property executed");
      return this.msg.split("").reverse().join("")}},methods: {
    getMessage(){
      console.log("The function executes.");
      return this.msg.split("").reverse().join("")}}}</script>

<style>

</style>
Copy the code

3.3 Calculate attribute – Complete writing method

On the computed, only the GET method is written by default, and no set method is written. Therefore, an error is reported

Grammar:

computed: {
    "Property name": {
        set(value){},get() {
            return "Value"}}}Copy the code

Requirements:

• Calculates properties for v-Model use

<template>
  <div>
      <div>
          <span>Name:</span>
          <input type="text" v-model="full">
      </div>
  </div>
</template>

<script>
// Problem: assigning values to evaluated properties - requires setters
/ / address:
export default {
    computed: {
        full: {
            // Assigning to full triggers the set method
            set(val){
                console.log(val)
            },
            // Use the value of full to trigger the get method
            get(){
                return "Anonymous"}}}}</script>

<style>

</style>
Copy the code

3.4 Case: Select All and reverse select

<template>
  <div>
    <span>Selection:</span>
    <input type="checkbox" v-model="isAll" />
    <button @click="btn">The selected</button>
    <ul>
      <li v-for="(obj, index) in arr" :key="index">
        <input type="checkbox" v-model="obj.c" />
        <span>{{ obj.name }}</span>
        <! -- <span>{{obj.b}}</span> -->
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [{name: "Pig quit".c: false}, {name: "The Monkey King".c: false}, {name: "Tang's monk".c: false}, {name: "White Dragon Horse".c: false,}]}; },methods: {
    btn() {
      this.arr.forEach((obj) = >(obj.c = ! obj.c)); }},computed: {
    isAll: {
      set(val) {
        this.arr.forEach((obj) = > (obj.c = val));
      },
      get() {
        // return this.arr.every((obj) => obj.c === true);
        return this.arr.every((obj) = >obj.c); }},}};</script>
<style>
li {
  list-style: none;
}
</style>
Copy the code

4. Vue listener

4.1 Listener -watch

Function: Listen for data changes

Usage: Defined in watch

Grammar:

watch: {
    "Name of the property being listened on"(newVal, oldVal){   
        "Handle business"}}Copy the code

Usage:

<template>
  <div>
    <input type="text" v-model="name">
  </div>
</template>

<script>
export default {
  data(){
    return {
      name: ""}},// Target: listens for changes in the name value

  watch: {
    // newVal: the latest value
    // oldVal: last moment value
    name(newVal, oldVal){
      console.log(newVal, oldVal); }}}</script>

<style>

</style>
Copy the code

4.2 VUE Listener – Deep listening and Immediate execution

Deep listening (listener)

• Grammar:

  watch: {
      "Name of the property to listen on": {
          immediate: true.// Execute immediately
          deep: true.// Listen deeply for intra complex type changes
          // Handler listener function
          handler (newVal, oldVal) {
              
          }
      }
  }
  Copy the code

Complete example code:

<template>
  <div>
    <input type="text" v-model="user.name">
    <input type="text" v-model="user.age">
  </div>
</template>
<script>
export default {
  data(){
    return {
      user: {
        name: "".age: 0}}},watch: {
    user: {
      handler(newVal, oldVal){
        // The object in user
        console.log(newVal, oldVal);
      },
      deep: true.immediate: true}}}</script>

<style>

</style>
Copy the code