Dart的混入概念和Vue3的混入概念

我不會發表於2022-11-24
DartVue

Dart

mixin即mix in，中文翻譯過來是“混入”，就是在類中混入其他功能

在Dart官網中的定義是Mixins are a way of reusing code in multiple class hierarchies.翻譯過來就是“Mixins是一種在多類層次結構中複用程式碼的一種方式”

Dart的mixins使用

首先用mixin關鍵字定義一個mixin類
對於mixin關鍵字可以這樣理解，定義類用class，定義介面用interface，而定義Mixins用的就是mixin A {
void a() {print('A');}
}
然後用with關鍵字混入一個mixin類
對於with關鍵字也可以這樣理解，整合類用extends，實現介面用implements，而混入Minxins用的就是with
void main() {
Mix m = Mix();
m.a();
}

多混入

Mixins支援多混入，這樣就可以使用多個Mixin類的功能
如下的Mix類混入了A、B兩個類
mixin A {
void a() {
print('A');
}
}
mixin B {
void b() {
print('B');
}
}
class Mix with A, B {
//混入多個類
}
void main() {
Mix m = Mix();
m.a();
m.b();
}

注意事項

  1. Mixins除了繼承Object外，不可以繼承任何其他類
  2. Mixins不可以定義構造方法
  3. 方法覆蓋，後蓋前

vue3的混入

混入 (mixins)定義了一部分可複用的方法或者計算屬性。混入物件可以包含任意元件選項。當元件使用混入物件時，所有混入物件的選項將被混入該元件本身的選項。

const myMixin = {
  created() {
   this.hello()
  },
  methods: {
   hello() {
   console.log('wdada!')
   }
  }
}
 
// 定義一個應用，使用混入
const app = Vue.createApp({
  mixins: [myMixin]
})
 
app.mount('#app')

混入合併

當元件和混入物件含有同名選項時，這些選項將以恰當的方式混合。
比如，資料物件在內部會進行淺合併 (一層屬性深度)，在和元件的資料發生衝突時以元件資料優先。
以下例項中，Vue 例項與混入物件包含了相同的方法。從輸出結果可以看出兩個選項合併了。

<div id = "app"></div>
<script type = "text/javascript">
const myMixin = {
  data() {
    return {
      message: 'hello',
      foo: 'runoob'
    }
  }
}
 
const app = Vue.createApp({
  mixins: [myMixin],
  data() {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created() {
    document.write(JSON.stringify(this.$data)) 
  }

輸出結果顯示： {"message:goodbaye,"foo": "runoob","bar":"def"}

同名鉤子

同名鉤子函式將合併為一個陣列，因此都將被呼叫。另外，mixin 物件的鉤子將在元件自身鉤子之前呼叫。

const myMixin = {
  created() {
    console.log('mixin 物件的鉤子被呼叫')
  }
}

const app = Vue.createApp({
  mixins: [myMixin],
  created() {
    console.log('元件鉤子被呼叫')
  }
})

mixins的鉤子函式比元件呼叫早

結果

這兩者區別較大，為了方便，所以記在一起

相關文章