Vue3 學習筆記 —mixin 混入
vue 2 中采用選項式API。如：data、methods、watch、computed以及生命周期鉤子函數等等。
mixin 混入，提供了一種非常靈活的方式，來分發 vue 組件中的可復用功能，一個mixin 對象可以包含任意組件選項，當組件使用 mixin 對象時，所有的 mixin 對象的選項將被混入組件本身的選項。
一、mixin 如何使用 ?
通俗地講，mixin 對象把一些組件公用的選項，如data內數據，方法、計算屬性、生命周期鉤子函數，單獨提取出來，然后在組件內引入，就可以與組件本身的選項進行合并。
示例1：
- <script>
- const myMixin = {
- data(){
- return {
- num:520
- }
- },
- mounted(){
- console.log('mixin mounted');
- }
- }
- export default {
- mixins:[myMixin],
- }
- </script>
就相當于：
- <script>
- export default {
- data(){
- return {
- num:520
- }
- },
- mounted(){
- console.log('mixin mounted');
- }
- }
- </script>
這樣做的好處就是可以把多個組件公共選項抽取到一個 mixin 對象內，需要的時候直接引入就可以了。
二、mixin 使用時注意點
mixin 包含的選項，同時組件內也可以包含這些選項，如果 mixin 中包含的選項中，有部分屬性相同怎么辦?如 mixin 和組件內都存在一個同名方法時，如何處理?或者都包含生命周期鉤子函數時，它們的執行順序誰前誰后呢?接下來我們就看看，使用 mixin 時應該注意的點。
2.1、使用 mixin 對象時，組件內部和 mixin 包含相同選項，如何處理呢?
示例2：mixin 對象和實例都包含data選項，內部有兩個不同的變量
- <template>
- <div>
- {{qdr}} - {{name}}
- </div>
- </template>
- <script>
- const myMixin = {
- data(){
- return {
- name:'熱愛前端的小姐姐'
- }
- }
- }
- export default {
- mixins:[myMixin],
- data(){
- return {
- qdr:"前端人"
- }
- }
- }
- </script>
運行后，我們發現兩個變量都能使用，mixin 對象中的 data 與實例中的 data 選項進行合并了。對于 methods 、computed 也是一樣的。
如果我們把上個實例中的兩個變量，修改成同名時，會怎樣呢?
2.2、使用的 mixin 對象選項 和實例中的選項擁有相同的屬性該如何處理?
示例3：data 內擁有相同的變量名 name
- <template>
- <div>
- {{name}}
- </div>
- </template>
- <script>
- const myMixin = {
- data(){
- return {
- name:'熱愛前端的小姐姐'
- }
- }
- }
- export default {
- mixins:[myMixin],
- data(){
- return {
- name:"前端人"
- }
- }
- }
- </script>
運行結果，name 值為 “前端人”。
屬性值相同時，會選擇就近原則，優先繼承實例內的值，所以 mixin 對象的屬性會被實例中的屬性給覆蓋掉。
2.3、mixin 對象也可以添加生命周期鉤子函數，mixin 和 實例中 的那個優先執行呢?
示例4：mixin 加入生命周期鉤子函數，以 mounted 為例
- const myMixin = {
- mounted(){
- console.log('mixin mounted');
- }
- }
- export default {
- mixins:[myMixin],
- mounted(){
- console.log('mounted');
- }
- }
運行結果：
我們發現生命周期函數會合并執行，優先執行 mixin 中的， 然后再執行實例中的。
三、mixin 自定義屬性
$options 用于當前組件實例 的初始化選項，需要在選項中包含自定義 property 時會有用處。
簡單講，$options 用于在實例中調用 mixin 自定義屬性。
示例5：添加自定義屬性
- const myMixin = {
- custom:'自定義屬性'
- }
在實例中使用：
- mounted(){
- console.log(this.$options.custom);
- }
如果在實例中也包含一個同名自定義屬性時，優先級會作何處理呢?如果我們想控制優先級又該如何處理呢?
四、合并策略
optionMergeStrategies 選項合并策略，使用 mixin 自定義屬性和實例中的屬性沖突時，使用optionMergeStrategies 定義合并規則的，也就是優先使用誰的問題。
使用規則：
- app.config.optionMergeStrategies.propertyName=(mixinVal,appVal)=>{
- return appVal || mixinVal // 確定優先返回哪個屬性值
- }
根據上述示例5，給實例中加 custom 屬性，運行查看結果。
示例6：驗證 mixin 和 實例 屬性優先級
- <script>
- const myMixin = {
- custom:'mixin custom',
- }
- export default {
- custom:'app custom',
- mixins:[myMixin],
- mounted(){
- console.log(this.$options.custom); // 打印結果：app custom
- }
- }
- </script>
發現，mixin 對象中的屬性值被實例中屬性值覆蓋掉了。我們可以借用上述的 optionMergeStrategies 屬性，修改 custom 的合并規則。
在 main.js 文件內引入：
- app.config.optionMergeStrategies.custom=(mixinVal,appVal)=>{
- return mixinVal || appVal
- }
再次運行之后，我們發現打印結果變成 mixin 中的屬性值了：
console.log(this.$options.custom); // 打印結果：mixin custom
五、全局配置 mixin
如果項目中有多個組件復用某些選項時，我們可以通過全局使用 mixin 對象。一個實例也可以引入多個 mixin 對象。語法如下：
- app.mixin([ {}, {}, {} ])
