Vue如何使用混合Mixins和外掛開發詳解
官網：混合 (mixins) 是一種分發 Vue 元件中可複用功能的非常靈活的方式。混合物件可以包含任意元件選項。以元件使用混合物件時，所有混合物件的選項將被混入該元件本身的選項。
個人：混入就是用來對vue元件中的公共部分，包括資料物件、鉤子函式、方法等所有選項，進行提取封裝，以達到程式碼的複用，混合用處挺大的，然我們來看看實際用法。
基礎用法
// 這是在main.js根檔案中使用,在組中使用也是一樣
import Vue from 'vue';
var mixin = {
data() {
return {
name: 'www.vipbic.com',author: '羊先生'
}
},created: function() {
console.log('Website：' + this.name)
},methods: {
foo: function() {
console.log('作者：' + this.author)
},conflicting: function() {
console.log('from mixin')
}
}
}
new Vue({
mixins: [mixin],render: h => h(App),created() {
let option = this.$options.doNotInit
console.log('option：',);
this.foo()
}
}).$mount('#app')
// 在組建中使用
<template><div></div></template>
<script>
var mixin = {
data() {
return {
name: 'www.vipbic.com',methods: {
foo: function() {
console.log('作者：' + this.author)
}
}
}
export default {
mixins: [mixin],created(){
this.foo()
}
}
</script>效果如下，都一樣，可以看出混合mixins中的created高於元件created執行優先順序
全域性註冊
main.js中直接註冊
import Vue from 'vue';
var mixin = {
data() {
return {
name: 'www.vipbic.com',methods: {
foo: function() {
console.log('作者：' + this.author)
}
}
}
Vue.mixin(mixin)
new Vue({
render: h => h(App)
}).$mount('#app')效果如下，我們先不呼叫，看看控制檯是否有列印結果，可以發現我們並未呼叫，就列印了兩次，按照大家常規考慮可能會想到執行一次，是正常的，即初始化一次，但卻執行了兩次
如何解決執行兩次
我在網上看到都是這麼做的，都說是從官網上看到的，但是我在官網上並沒有看到，不過的確能解決問題
var mixin = {
data() {
return {
name: 'www.vipbic.com',created: function() {
let option = this.$options.doNotInit;
console.log(option) // 第一次執行 true 第二次為 undefined
if (!option) {
// 可以放置一些你的邏輯，比如一開始就要呼叫的方法
console.log('Website：' + this.name)
}
},}
}
Vue.mixin(mixin);
new Vue({
doNotInit: true,// 新增一個狀態
render: h => h(App),}).$mount('#app')效果如下
如何呼叫
剛上面解釋瞭如何解決呼叫兩次的問題
// main.js
import Vue from 'vue';
var mixin = {
data() {
return {
name: 'www.vipbic.com',created: function() {
let option = this.$options.doNotInit;
if (!option) {
console.log('Website：' + this.name)
}
},}).$mount('#app')
// 在元件中呼叫
<script>
export default {
created(){
this.foo()
},}
</script>
模組化註冊
新建單獨的mixin.js檔案
import Vue from 'vue';
var mixin = {
data() {
return {
name: 'www.vipbic.com',conflicting: function() {
console.log('from mixin')
}
}
}
export default {
install(Vue) {
Vue.mixin(mixin)
}
}
// 在main.js通過use註冊
Vue.use(myMixin);
new Vue({
doNotInit: true,}).$mount('#app')
// 在元件中呼叫
<script>
export default {
created(){
this.foo()
},}
</script>
效果與main.js註冊方式一樣
開發外掛
上面提到use，也講解一下use相關的知識，而且在開發中也常常看到如Vue.use(VueRouter)，Vue.js 在外掛開發過程中需要注意是有一個公開方法 install 。這個方法的第一個引數是 Vue 構造器,第二個引數是一個可選的選項物件，
外掛通常會為Vue新增全域性功能。外掛的範圍沒有限制——一般有下面幾種：
1、新增全域性方法或者屬性，如: vue-element]
2、新增全域性資源：指令/過濾器/過渡等，如 vue-touch
3、通過全域性 mixin方法新增一些元件選項，如: vuex
4、新增 Vue 例項方法，通過把它們新增到 Vue.prototype 上實現。
5、一個庫，提供自己的 API，同時提供上面提到的一個或多個功能，如 vue-router
let MyPlugin = {}
MyPlugin.install = function (Vue,options) {
// 1. 新增全域性方法或屬性
Vue.prototype.$myMethod = function (options) {
// 邏輯...
}
// 2. 新增全域性資源指令
Vue.directive('my-directive',{
bind (el,binding,vnode,oldVnode) {
// 邏輯...
}
})
// 3. 注入元件,也就上面提到的混入,vue非常靈活就看你如何去挖掘它
Vue.mixin({
created: function () {
// 邏輯...
}
})
}
新增全域性方法或屬性
import Vue from 'vue';
//根據install函式規定，第一個傳入Vue的例項，第二個引數是一個可選的選項物件，也就是可以傳遞引數
MyPlugin.install = function(Vue,options) {
console.log(options) // 列印引數
Vue.prototype.myName = options.name
Vue.prototype.myAuthor = function() {
return options.author
}
}
Vue.use(MyPlugin,{
name: 'www.vipbic.com' // 傳遞引數
author: '羊先生'
});
new Vue({
render: h => h(App),}).$mount('#app')
在元件中呼叫
<script>
export default {
created(){
console.log(this.myName)
console.log(this.myAuthor())
},}
</script>
效果如下
新增全域性資源
// 通過vue指令的方式新增 指令可以全域性新增還可以在元件中新增
import Vue from 'vue';
let MyPlugin = {}
MyPlugin.install = function(Vue,options) {
Vue.directive("hello",{
bind: function(el,bingind,vnode) {
console.log(options)
el.style["color"] = bingind.value;
console.log("1-bind");
},inserted: function() {
console.log("2-insert");
},update: function() {
console.log("3-update");
},componentUpdated: function() {
console.log('4 - componentUpdated');
},unbind: function() {
console.log('5 - unbind');
}
})
}
// 傳遞引數
Vue.use(MyPlugin,{
name: 'www.vipbic.com',author: '羊先生'
});
new Vue({
render: h => h(App),}).$mount('#app')
在組中使用
<template>
<div>
<span v-hello="color3">{{message}}</span>
<button @click="add"> 點選開始加1</button>
<button @click="jiebang">解綁</button>
</div>
</template>
<script>
export default {
data(){
return {
message:10,color3:"red"
}
},methods:{
add(){
this.message++;
},jiebang(){
this.$destroy(); // 解綁
}
},}
</script>
<style lang="less" scoped>
</style>
頁面效果
分析結果，在分析結果前，我們先來看一下Vue.directive的api,來自官網的解釋
el：指令所繫結的元素，可以用來直接操作DOM
binding：一個物件，包含以下屬性
- name：指令名，不包含v-字首
- value：指令的繫結值，例如：上面例子中的值就是 red
- oldValue：指令繫結的前一個值，僅在 update 和componentUpdated 鉤子中可用。無論值是否改變都可用
- expression：字串形式的指令表示式
arg：傳給指令的引數，可選。
modifiers：一個包含修飾符的物件
自定義指令有5個生命週期(也叫作鉤子函式)分別是:
bind,inserted,update,componentUpdate,unbind
// 也就是在對應上面的例子中的
bind 只調用一次，指令第一次繫結到元素時候呼叫，用這個鉤子可以定義一個繫結時執行一次的初始化動作。
inserted:被繫結的元素插入父節點的時候呼叫(父節點存在即可呼叫，不必存在document中)
update: 被繫結與元素所在模板更新時呼叫，而且無論繫結值是否有變化，通過比較更新前後的繫結值，忽略不必要的模板更新
componentUpdate :被繫結的元素所在模板完成一次更新更新週期的時候呼叫
unbind: 只調用一次，指令月元素解綁的時候呼叫圖片黃色框的地方，是在元件使用了v-hello指令後所初始化的資料，並且也列印了接受引數，在點選解綁後，在點選開始加1則無效
注入元件
let MyPlugin = {}
MyPlugin.install = function(Vue,options) {
Vue.mixin({
data() {
return {
name: options.name
}
},methods: {
getUser() {
return options.author
}
}
})
}
Vue.use(MyPlugin,author: '羊先生'
})
new Vue({
render: h => h(App),}).$mount('#app')
在元件中使用
export default {
data(){
return {
}
},created(){
//這裡name和getUser來自全域性注入的
console.log(this.name)
console.log(this.getUser())
}
}
效果
Vue.use 會自動阻止註冊相同外掛多次，屆時只會註冊一次該外掛
參考文章
web前端開發-混合
Vue.directive指令
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。