关于vue.js: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-b…
提取码: yu27
百度云链接不稳固，随时可能会生效，大家放松保留哈。

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

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

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