Vue summary of small knowledge points

Li post for the proof, the future to the knowledge of the grasp can not be vague, to achieve accurate understanding of knowledge points, do say it is accurate! Come on!

2021 Die knock Vue starts from me

1. Navigation Guard

1. Navigation is triggered.

2. Call the beforeRouteLeave guard in the deactivated component.

3. Call the global beforeEach guard.

4. Call the beforeRouteUpdate guard (2.2+) in the reused component.

5. Invoke beforeEnter in the route configuration.

6. Parse the asynchronous route component.

7. Call beforeRouteEnter in the activated component.

8. Call the global beforeResolve guard (2.5+).

9. Navigation is confirmed.

10 Invoke the global afterEach hook.

11. Trigger DOM updates.

12. Call the beforeRouteEnter guard to pass to Next

The created component instance is passed in as an argument to the callback function.

2. Mixed with Mixins

Some components have some duplicate JS logic, such as checking mobile phone verification code, parsing time, etc. Mixins can be implemented by mixing mixins values into an array

To put it simply, when multiple components share some data \ methods, etc., these data and methods can be separated and introduced in the way of mixins

mixins/show.js

export const showMixin =  {
    data(){
        return {
            shwoTag: true}},methods: {
        tagShow(){
            this.shwoTag = !this.shwoTag
        }
    },
}
Copy the code

Home.vue

<template> <div class="home"> <img alt="Vue logo" v-show="shwoTag" src=".. /assets/logo.png"> <div @click="tagShow"> Show hidden </div> </div> </template> <script> import {showMixin} from '.. /mixins' export default { name: 'Home', mixins: [showMixin] } </script>Copy the code

3.$nextTick

Summary: executes after DOM asynchronous rendering is complete

<template> <div class="about"> <div ref="chrenDom"> <div v-for="item in arr" :key="item">{{item}}</div> </div> <h1 @click="add"> add </h1> </div> </template> <script> export default {data(){return {arr: [1, 2, 3, 4, 5]}}, methods:{ add(){ this.arr.push(Math.random()) let HM = this.$refs.chrenDom.children.length console.log(this.arr.length,HM) // 6 5 } } } </script>Copy the code

If ref=”chrenDom”, the number of children is 5, and the length of the array is 6

<script>
export default {
  data(){
    return {
      arr: [1.2.3.4.5]}},methods: {add(){
      this.arr.push(Math.random())
        this.$nextTick(() = >{
            let HM = this.$refs.chrenDom.children.length 
            console.log(this.arr.length,HM)  / / 6 June
        })
      
    }
  }
}
</script>
Copy the code

4. Use of render function

<script>
export default {
  data(){
    return {
      people: [
        'A'."B"."C"]}},render(createElement){
    return createElement(
        'h1', 
        {},
        this.people.map(name= >{
         return createElement('div', {attrs: {
             class: 'test'
           },
           on: {click: () = >{
               console.log('Clicked')}}},`${name}`)}))}}</script>
Copy the code

5. Component rendering process

Render -> newVnode(virtual DOM) -> Patch (vnode, newVnode) diff algorithm -> Update view

6. Vue methods for modifying native arrays

const arrayMethods = ['push'.'pop'.'shift'.'unshift'.'splice'.'sort'.'reverse'];
const arrayAugmentations = [];

arrayMethods.forEach((method) = > {

    // Here is the prototype method for the native Array
    let original = Array.prototype[method];

   // Encapsulate methods such as push and pop on properties of arrayAugmentations
   // Note: attributes, not stereotype attributes
    arrayAugmentations[method] = function () {
        console.log('I'm changed! ');

        // Call the corresponding native method and return the result
        return original.apply(this.arguments);
    };

});

let list = ['a'.'b'.'c'];
// Point the prototype pointer to the array we want to listen to to the empty array object defined above
// Don't forget that the empty array property defines methods such as push that we wrapped
list.__proto__ = arrayAugmentations;
list.push('d');  // I am changed! 4
Copy the code

7. Implementation principle of History

    const tags = document.getElementById('tags')

        window.addEventListener('DOMContentLoaded'.() = >{
            console.log(location.pathname)
        })

        // Click Change routing address
        tags.addEventListener('click'.() = >{
            const state = { name: 'home' }
            history.pushState(state, ' '.'home') // Jump address
            console.log('Routing address switched')})// Listen for information about routes changed by forward or backward routes
        window.onpopstate = (e) = >{
            console.log(e.state, location.pathname)
            // Prints the value of state and the routing address respectively
        }

Copy the code

8. The hash pattern

        const tags = document.getElementById('tags')

        // Hash when first loaded
        window.addEventListener('DOMContentLoaded'.() = >{
            console.log('hash'.window.location.hash)
        })


        // Click Change routing address
        tags.addEventListener('click'.() = >{
          location.href = '#/user'
        })

        // Listen for hash changes in the address bar
        window.onhashchange = function(e){
            console.log('oldUrl', e.oldURL)
            console.log('newUrl', e.newURL)

            console.log('hash'.window.location.hash)
        }
Copy the code

9. Use dynamic components

<component :is="Component Name"></component>
Copy the code

10. Application of instructions in button level permissions

store.js

state:{
    AuthButton: {
        add: true.delete: false}}Copy the code

Home.vue

<template>
  <div class="about">
    <div v-has="'add'">increase</div>
    <div v-has="'delete'">delete</div>

  </div>
</template>

<script>
import has from '.. /directives'
export default {
  directives:{
    has
  }
}
</script>
Copy the code

directives.js

export default {
    inserted(el, bindings, vnode){
        console.log('DOM element insert ')

        let stateValue = bindings.value  // Get the instruction value
        // Get global state (Vuex) whether the user has permission for the button (true, false)
        let boolean = vnode.context.$store.state.AuthButton[stateValue] 
        // If you don't have permission for the button, get its parent and delete the element! boolean && el.parentNode.removeChild(el) } }Copy the code

Custom instruction parameters

Bind: Called only once, the first time a directive is bound to an element. This is where you can perform one-time initialization Settings. (Can’t get parent node)

Inserted: Called when the bound element is inserted into a parent (the parent is guaranteed to exist, but not necessarily inserted into the document).

Update: called when the component’s VNode is updated, but may occur before its child VNodes are updated. The value of the instruction may or may not have changed. But you can ignore unnecessary template updates by comparing the values before and after the update

ComponentUpdated: Invoked when the VNode of the component where the directive resides and its child VNodes are all updated.

Unbind: Called only once, when an instruction is unbound from an element.