mixin-- 混入

mixin 是 vue 组件复用功能的技术之一 他可以把多个组件中重复出现的属性和方法进行封装方便多次调用

使用

1. 混入就是把组件多次使用的属性和方法等内容进行封装

新建一个 mixin 的文件夹用来容纳混入的封装

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

调用
全局混入 --mixin
慎用可能会造成代码的污染、

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 1.引用mixin
import {
    demo} from "./mixins"
// 2.配置全局混入
Vue.mixin(demo)
​
Vue.config.productionTip = false
​
new Vue({
    
 router,
 store,
 render: h => h(App)
}).$mount('#app')

​
局部混入 --mixins

<template>
 <div class="about">
   <h1>This is an about page</h1>
   <!-- 3.就可以直接想怎么用就怎么用混入的内容 -->
   <button @click="fun()">点我调用混入的方法--{
    {
    text}}</button>
 </div>
</template>
<script>
// 1.引用混入
import {
    demo} from "@/mixins"
export default {
    
// 2.调用混入
 mixins:[demo]
}
​
</script>

Vue 生命周期的各个钩子函数

beforeCreate 实例准备创建 （数据观测与初始化事件还没有执行）

created 实例创建完毕 （完成了数据的观测 属性 方法也都进行了初始化 但是页面没有显示渲染）

beforeMount 模板准备渲染 （在准备把 template 模板往页面中进行挂在 准备编译页面内容）

mounted 页面加载完毕之后立即调用 （页面被成功的进行了挂载 页面的 dom 内容也都生成完毕）

beforeUpdate 开始准备更新（在数据准备更新的时候调用 此时还处于数据构建更新的准备阶段）

updated 更新完毕 （数据已经成功的在页面 dom 中更新完毕了）

beforeDestroy 开始准备销毁（vue 实例还能用）

Destroyed 销毁完毕

自定义指令钩子函数
bind : 绑定指令到元素上 只执行一次；

inserted : 绑定了指令的元素在插入页面展示的时候调用

update： 所有节点更新的时候调用

componentUpdate: 指令所在组件的节点以及他自己所有的子节点全部更新了 在调用

unbind: 接触指令和元素的绑定时候调用 只执行一次

源码附件已经打包好上传到百度云了，大家自行下载即可～

链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27
提取码: yu27
百度云链接不稳定，随时可能会失效，大家抓紧保存哈。

如果百度云链接失效了的话，请留言告诉我，我看到后会及时更新～

开源地址
码云地址：
http://github.crmeb.net/u/defu

Github 地址：
http://github.crmeb.net/u/defu