This is the 18th day of my participation in the August Challenge

This article summarizes the common key knowledge points of VUE for daily work to understand the continuous update….

1. V-for and V-IF priorities

  1. Obviously V-for is parsed before V-i.
  2. If it happens at the same time, each render will execute a loop before judging the condition, so the loop is inevitable anyway, wasting performance
  3. To avoid this, nest the template in the outer layer, do a V-if judgment in this layer, and then do a V-for loop inside

2. Value transfer between components

See article: Three ways to pass values to components

2.1.1 Parent Components pass values to child components

  • 1. Bind dynamic properties when parent component calls child component<v-header :title="title"></v-header>
  • 2. On the child component, props receives data from the parent component
  • 3. You can pass properties, methods, and instances to use directly in child components

2.1.2 The child component actively obtains the properties and methods of the parent component

Child components pass this.$parent directly. Data ‘ ‘this.$parent. methods

2. 2 Child components transmit values to parent components

2.2.1 The parent component actively obtains the data and methods of the child component

  • Define a ref when calling the child component<v-header ref="header"></v-header>
  • Passes in the parent componentThis $refs. Header. Attributes this. $refs. The header. methods

2.2.2 Custom events of child Components send values to parent components

Child components:

this. $emit("Custom Event Name", data to be transmitted);Copy the code

The parent component:

<Header @childInput= ' getVal '></Header>
methods:{
getVal(msg){
/ /mSg is the data passed by the child component}}Copy the code

Child components

<template>
  <div>{{this.$parent. MSG}}<! Define a method for passing values to a child component.
    <input type="button" value=Click trigger @click="childClick">
  </div>
</template>

<script>
  export default {
    props: {msg:String
    },
    data () {
      return {
        childValue:"I am the value of a child component."}},methods: {
      childClick () {
        this.$emit('childClick'.this.childValue)
      }
    }
  }
</script>

Copy the code

The parent component

<template>
  <div>My name is<! -- Subcomponent -->
    <! -- <child :msg="name"></child> -->
     <! Define an on method to listen for the state of the child component.
     <! -- Click the child component button to display the child component's data on the parent component -->
     <! The name of the custom event is the same as that of the child component $emit.
    <child @childClick="childByValue"></child>
    
    {{name}}

  </div>
</template>

<script>
import Child from './Child'
  export default {
    data() {
      return {
        name:"pz".msg:"Parent component data"}},components: {
      child:Child
    },
    methods: {
      childByValue(childValue) {
        // childValue is the value passed by the child component
        this.name = childValue
      }
    }
  }
</script>

Copy the code

2.3 Value transfer between sibling Components

(If values are transmitted between non-parent and child components, you need to define a public instance file bus.js as an intermediate repository for transferring values; otherwise, the effect of transferring values between routing components cannot be achieved.) The public bus. Js

import Vue from 'vue'
export default new Vue()

Copy the code

A component is A:

<template>
  <div>A component:<span>{{elementValue}}</span>
    <input type="button" value=Click trigger @click="elementByValue">
  </div>
</template>
<script>
  // Introduce common bugs as intermediate communication tools
  import Bus from './bus.js'
  export default {
    data () {
      return {
        elementValue: 4}},methods: {
      elementByValue: function () {
        Bus.$emit('val'.this.elementValue)
      }
    }
  }
</script>

Copy the code

The component B:

<template>
      <div>B component:<input type="button" value=Click trigger @click="getData">
        <span>{{name}}</span>
      </div>
    </template>
    <script>
      import Bus from './bus.js'
      export default {
        data () {
          return {
            name: 0}},mounted: function () {
          var vm = this
          // Use the $on event to receive parameters
          Bus.$on('val'.(data) = > {
            console.log(data)
            vm.name = data
          })
        },
        methods: {
          getData: function () {
            this.name++
          }
        }
      }
    </script>

Copy the code

Key 3

Function: As long as it is to update the virtual DOM more efficiently, diff algorithm virtual DOM if the node type is different, directly kill all the nodes in front of the virtual DOM, and then create and insert a new node, will not compare the node after the node if the node type is the same, will reset the attributes of the node, so as to achieve the update of the node. Using a key gives each node an identity so that the diff algorithm can correctly identify the node and find a new place to insert the node

4. V-if V-show difference

  • V-if is “true” conditional rendering because it ensures that event listeners and subcomponents within the conditional block are properly destroyed and rebuilt during the switch.
  • V-if is also lazy: if the condition is false during initial rendering, nothing is done until the condition is true for the first time, and the conditional block is rendered.
  • In contrast, V-show is much simpler – elements are always rendered regardless of initial conditions and simply switch based on CSS.
  • In general, V-if has a higher switching overhead, while V-show has a higher initial rendering overhead. Therefore, v-show is good if you need to switch very frequently; V-if is preferable if conditions are unlikely to change at run time.

5. How do I make CSS work only in the current component

For example, with the introduction of swiper, to change the style of pagination dots to demonstrate sASS style penetration: parent /deep/ child elements

<style lang="sass" scope>
.swiper-pagination /deep/ .swiper-pagination-bullet-active {
  background:red;
}
</style>

Copy the code

6. Solve the 300ms delay in time processing on the mobile terminal

  1. Download NPM Install Fastclick
  2. Import FastClick from ‘FastClick’ FastClick. attach ( document. body);

7. Vue – loader USES

Vue -loader is a file loader, with template/js/style installed into js module use: JS can write ES6 CSS can be used with less sass

8. What does NextTick do

Description: NextTick executes deferred callback after the end of the next DOM update loop, using nextTick after modifying a function executes deferred callback after the end of the next DOM update loop, using nextTick after modifying a function executes deferred callback after the end of the next DOM update loop, and using NEx after modifying a function TTick, you can get the updated DOM scene in the callback: after the view is updated, you can operate based on the new view

9. Why does data in scaffolding return a function

Because of the features of JS itself, if data is an object, then because the object itself belongs to the reference type, when we modify one of the attributes, it will affect the data of all Vue instances. If data is returned as an object as a function, the data attributes of each instance are independent and do not affect each other.

10. Keep -alive

Definition: it is a built-in component that stores transitions in memory during component switching, preventing repeated rendering of dom instructions that do not render in the DOM tree

11. Difference between Watch and computed Tomography

  • Computed attributes are known in data that are worth a new value, perform poorly, and others’ changes affect themselves (passive)
  • Watch listens for data in data, listens for route changes, my changes affect others (actively) can get new values and old values