文章目錄
mixins介紹
- 說人話就是vue給我們提供了一種更加靈活的實現業務實現邏輯的方式。
mixins局部使用和使用同名鉤子函數的執行順序
看源碼：
<template>
<div class="hello">
<input v-model="name" />
<button @click="func_name()">點擊</button>
</div>
</template>
<script>
//驗證調用先後順序
var watchcount = {
//驗證調用的先後順序
updated() {
console.info(this.count + "我是mixins的updated方法");
}
};
export default {
name: "HelloWorld",
data() {
return {
count: 0,
name: ""
};
},
mixins: [watchcount],
updated() {
console.info(this.count + "我是updated的方法");
},
watch: {
name: function(newval, oldval) {
this.count++;
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
input {
width: 250px;
height: 30px;
outline: none;
border-radius: 4px;
border: 1px solid #000000;
}
button {
width: 90px;
height: 30px;
outline: none;
border-radius: 4px;
color: #ffffff;
border: none;
background: burlywood;
}
button:hover {
width: 90px;
height: 30px;
outline: none;
border-radius: 4px;
color: #000000;
border: none;
background: burlywood;
}
</style>
執行結果：
1我是mixins的updated方法
1我是updated的方法
結果分析
我們首先看到了mixins是怎麼使用的，我們定義一個變量，直接將我們需要的邏輯實現，這裏我監聽了input裏面的name的指，做了一個updated的操作，每次值的變化都會引起我們mixins和vuejs的變化，那麼我們驗證了第一個問題就是mixins的執行順序的問題，當存在相同鉤子函數的時候，mixins是優先執行的。
mixins函數覆蓋問題
看源碼
<template>
<div class="hello">
<input v-model="name" />
<button @click="func_name()">點擊</button>
</div>
</template>
<script>
//驗證調用先後順序
var watchcount = {
methods: {
func_name() {
console.info(this.count + "我是mixin裏面的method的方法");
}
},
};
export default {
name: "HelloWorld",
data() {
return {
count: 0,
name: "",
message : '您好,我是來自原生vue內容'
};
},
mixins: [watchcount],
methods: {
func_name() {
console.info(this.count + "我是原生vue裏面的method的方法");
}
},
watch: {
name: function(newval, oldval) {
this.count++;
}
}
};
執行結果
0我是原生vue裏面的method的方法
結果分析
由於上面的已經將樣式什麼的全部貼了上來，所以這個例子就不貼樣式了，自己測試的時候自己加上就可以了，這裏我們說一下現象，我們可以看到的就是當我們同時使用兩個同名函數的時候呢，會出現一個問題就是我們的mixins裏面的函數被覆蓋掉了，這個是需要注意的點。
mixins變量替換合併問題
看源碼
<template>
<div class="hello">
<input v-model="name" />
<button @click="func_name()">點擊</button>
</div>
</template>
<script>
//驗證同名合併性
var minxin_data = {
data : function() {
return {
message : '您好，我是來自minxins',
sex : "男"
}
}
}
export default {
name: "HelloWorld",
data() {
return {
count: 0,
name: "",
message : '您好,我是來自原生vue內容'
};
},
mixins: [minxin_data],
created() {
console.info(this.$data)
},
watch: {
name: function(newval, oldval) {
this.count++;
}
}
};
</script>
執行結果
count: 0
name: “”
message: “您好,我是來自原生vue內容”
sex: “男”
結果分析
我們可以看到，上面我在mixins裏直接定義了message和sex，我在下面的vue實例中也定義了一個message和name、count這幾個，我們要驗證的是同名的會怎麼樣，不同名的會怎麼樣，結果給我們的信息是同名的會被vue裏面的覆蓋掉，不同名的會被加到一個新的數組裏面。
全局引用mixin
- 上面我們說的全部都是局部引用一個mixins，下面說一下怎麼全局引用這個模塊
新建一個mixinjs
let mixin = {
data() {
return {
}
},
methods: {
func_name() {
console.info("我是來自全局的mixin")
}
},
};
export default mixin;
main.js註冊
import Vue from 'vue'
import App from './App'
import Mixin from './states/mixins' //路徑不要寫錯
import router from './router'
Vue.mixin(Mixin) //註冊使用
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
組件直接使用
<template>
<div class="hello">
<input v-model="name" />
<button @click="func_name()">點擊</button>
</div>
</template>
執行結果
我是來自全局的mixin
結果分析：這裏我直接運行的，是可以的，前提是我將局部的和vue裏面的全部都註釋掉了該函數，也就是說我初步測試的結論是全局的是不比局部的優先執行的，但是網上給我的信息是全局是優先執行的，所以這個問題有待考證。這裏還要注意的一個點是全局使用的是mixin是沒有s的。
寫到後面
- 寫到這裏mixin的使用和遇到的基本的問題就寫完了，但是這裏簡單的說一下，我們在使用的時候儘量使用我們的局部的，全局的可能會污染一些我們公共的組件中的功能，所以謹慎使用，分發路由的時候使用全局的還是很方便的。感謝您的閱讀，喜歡的可以關注一下，一起交流討論，也可以加我的微信進羣，下篇文章見！