1. Prototype injection

• Global properties and methods can be defined this way
• Easy to call and obtain
• Generally, there are not many definitions (it will pollute the prototype, and Vue will bring it with each instance)

// main.js entry file
import Vue from "vue";
import router from "./router";
import store from "./store";
import dayjs from "dayjs";
import App from "./App";

// Inject dayjs into Vue prototype to facilitate this in Vue component Dayjs get
Vue.prototype.dayjs = dayjs;
// This. In any component FN () can be called
Vue.prototype.fn = function(){
	// do something
}
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

2. Object freezing

• It is used for pure list rendering without data interaction. It can prohibit vue from hijacking binding, save memory and improve performance

<script>
import * as Api from "@/common/apiNew.js";
export default {
  data() {
    return {
      dataList: Object.freeze(this.list),
    };
  },
  methods: {},
};
</script>

3.img loading failed

• Add default picture

<img :src="imgUrl" @error="handleError" alt="">
<script>
export default{
  data(){
    return{
      imgUrl:''
    }
  },
  methods:{
    handleError(e){
      e.target.src = reqiure('Picture path') 
    }
  }
}
</script>

4. Recursive component

• tree component common
• The level is determined according to the background data. I don't know how many levels it is
• The current scene requires dynamic components
  concept
• A component can call itself recursively in its template, as long as you set the name component to the component
• A condition must be given to limit the quantity, or an error will be thrown: max stack size exceeded
• Component recursion is used to develop some independent components with unknown hierarchical relationship (such as common cascade selectors and tree controls)

<template>
  <div v-for="(item,index) in treeArr">
      Sub component, current level value: {{index}} <br/>
      <!-- Recursive call itself, The background judges whether there is no value change -->
      <tree :item="item.arr" v-if="item.flag"></tree>
  </div>
</template>
<script>
export default {
  // name must be defined to be called recursively inside the component
  name: 'tree',
  data(){
    return {}
  },
  // Receive external incoming values
  props: {
     item: {
      type:Array,
      default: () => []
    }
  }
}
</script>

5. Solve the complex template render function

• There is an occasional problem of one value and multiple judgments in the code

<template>
  <div class="hello">
    <h1>Save the chaos template -- render()</h1>
    <!-- One value multiple judgment -->
    <div v-if="value === 1">
      <button>Button 1</button>
    </div>
    <div v-else-if="value === 2">
      <button>Button 2</button>
    </div>
    <div v-else-if="value === 3">
      <button>Button 3</button>
    </div>
    <div v-else>
      <button>Button 4</button>
    </div>
  </div>
</template>

• That's right, but it looks very indecent and redundant
• We can use the render() function to encapsulate a button component
• Just pass the value, you can get different types of buttons, which is very convenient

<script>
export default {
    props: {
        type: {
            type: String,
            default: 'normal'
        },
        text: {
            type: String,
            default: 'normal'
        }
    },
    render(h){
        // h: createElement()
        return h('button', {
            // v-bind:class
            class: {
                btn: true,
                'btn-success': this.type === 'success',
                'btn-danger': this.type === 'error',
                'btn-warning': this.type === 'warning',
                'normal': !this.type
            },

            // dom properties
            domProps:{
                innerText: this.text || 'Default button'
            },
            // v-on events can be bound here
            on:{

            } 
        })
            
        
    }
}
</script>
<style scoped>
.btn{
    width: 100px;
    height: 40px;
    color: white;
    transition: all .5s;
}
.btn:hover{
    background: chartreuse;
    cursor: pointer;
}
.btn-success{
    background: green;
}
.btn-danger{
    background: red;
}
.btn-warning{
    background: orange;
}

.normal{
    background: blue;
}

</style>

• call

// 1. Introduction
import Button from '../views/button.vue';
// 2. Register in components
components:{
	Button
}
// 3. It can be used in the template. Pass in the corresponding value
<Button
	:type = "type"
	:text = "text">
</Button>

6. Delayed updates - Vue nextTick()

• Perform a deferred callback after the next DOM update cycle ends
• Use this method immediately after modifying the data to get the updated DOM
• It is generally used when the parent component calls the method of the child component and needs to wait until it is updated

//Because the dom in the mounted stage is not rendered, you need $nextTick
mounted(){ 
  this.$nextTick(() => {
  	// Get the dom through $refs and bind the send method
    this.$refs.msg.send('Zhejiang Wenzhou Jiangnan leather factory') 
  })
}

7. Custom instructions

• Customize an instruction to make the input box on the page automatically get the focus

Vue.directive('focus', {
        inserted: function(el){
            el.focus();
        }
    })

• use

<input placeholder="Please enter your phone number" v-model="tel" v-focus />

1. I hope this article can be helpful to you. If there are any errors, please point them out

2. It's not easy to be original. Please use your hands to make a fortune to support a wave (attention, comments, praise and collection)
3. Thank you! We will continue to offer high-quality articles in the future
4. If you have any questions, you can confide in me