Mixin -- mixed

mixin yes vue One of the technologies of component reuse function It can encapsulate the properties and methods that appear repeatedly in multiple components to facilitate multiple calls

Use

1. Mixing is to encapsulate the attributes and methods used by components many times

Create a new one mixin The folder of is used to contain the mixed encapsulation

export let demo={
    
  methods:{
    
      fun(){
    
          console.log(" Hello ！！！！！！")
      }
  },
  data(){
    
      return {
    
​
      }
  },
  computed:{
    
​
  }
}

call
The whole thing is in --mixin
Careful use may cause code pollution 、

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 1. quote mixin
import {
    demo} from "./mixins"
// 2. Configure global blending 
Vue.mixin(demo)
​
Vue.config.productionTip = false
​
new Vue({
    
 router,
 store,
 render: h => h(App)
}).$mount('#app')

​
To mix in partially --mixins

<template>
 <div class="about">
   <h1>This is an about page</h1>
   <!-- 3. You can use the mixed content as you want  -->
   <button @click="fun()"> Click on me to call the mixed method --{
    {
    text}}</button>
 </div>
</template>
<script>
// 1. Reference blending 
import {
    demo} from "@/mixins"
export default {
    
// 2. Call blending 
 mixins:[demo]
}
​
</script>

Vue Hook functions of the life cycle

beforeCreate The instance is ready to be created （ Data observation and initialization events have not been executed yet ）

created Instance creation finished （ Completed the observation of data attribute Methods are also initialized But the page doesn't show the rendering ）

beforeMount Template ready to render （ In preparation for template The template is hung in the page Ready to compile page content ）

mounted Call... Immediately after the page is loaded （ The page was successfully mounted Page dom The content is also generated ）

beforeUpdate Start preparing for updates （ Call when the data is ready to be updated At this time, it is still in the preparation stage of data construction and update ）

updated Updated completely （ The data has been successfully displayed on the page dom Has been updated in ）

beforeDestroy Start preparing for destruction （vue Examples still work ）

Destroyed Destroyed

Custom instruction hook function
bind : Binding instructions to elements Only once ;

inserted : The element bound with the instruction is called when inserting the page display

update： Call when all nodes are updated

componentUpdate: The node of the component where the instruction is located and all its own child nodes have been updated Calling

unbind: Call when contacting the binding of an instruction and an element Only once

The source code attachment has been packaged and uploaded to Baidu cloud , You can download it yourself ～

link : https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27
Extraction code : yu27
Baidu cloud link is unstable , It may fail at any time , Let's keep it tight .

If Baidu cloud link fails , Please leave me a message , When I see it, I will update it in time ～

Open source address
Code cloud address ：
http://github.crmeb.net/u/defu

Github Address ：
http://github.crmeb.net/u/defu