vuejs中mixins,extends,extend的區別

時間 2019-12-14
標籤 vuejs mixins extends extend 區別简体版
原文原文鏈接
一、mixins
mixins是對組件的擴充，包括methods、components、directive等。
mixins的幾個規則：
一、觸發生命週期鉤子函數時，先觸發mixins組件中的鉤子，再調用組件自身的函數。
二、當mixins數組中有watch，混入的組件中也存在watch，而且watch中的key相同時，混入組件中的watch會先觸發，而後再是組件中的watch觸發
三、雖然也能在建立mixin時添加data、template屬性，但當組件自身也擁有此屬性時以本身爲準，從這一點也能看出製做者的用心（擴充）。
四、data、methods內函數、components和directives等鍵值對格式的對象均以組件自身或實例爲準，組件自身沒有定義纔會去mixins混入的組件中去找。
五、watch，mixins數組中的組件和組件自身的watch會合並在一個數據中，mixins中的組件中的watch會先運行，而後再是組件自己的watch


mixins選項合併：
當組件和混入對象含有同名選項時，這些選項將以恰當的方式進行「合併」。數據對象在內部會進行遞歸合併，在有同名的keys時以組件數據優先。
二、extends
extends與mixins相似；合併規則和mixins一致。extends容許聲明擴展另外一個組件(能夠是一個簡單的選項對象或構造函數)，而無需使用 Vue.extend。這主要是爲了便於擴展單文件組件。
三、extend
extend能夠擴展 Vue 構造器，從而用預約義選項建立可複用的組件構造器。
<body>
<div id="app">
	<!--<runoob></runoob>-->
	extend擴展的組件
	<myrunoob></myrunoob>  
</div>

<script>
// 註冊
let options = {
    //template: '<p>{{name}} {{lastName}} aka {{alias}}</p>',
    data: function () {
        return {
            name: 'extend',
            lastName: 'White',
            alias: 'Heisenberg'
        }
    },
    created(){
        console.log('extend created');
    },
	mounted(){
        console.log('extend mounted');
    }
};
let runoob=Vue.component('runoob', {
  template: '<h1>{{name}}</h1>',
  data(){
	return{
		name:'compnents self'
	}  
  },
  created(){
   console.log("runoob created")
  },
  mounted(){
   console.log("runoob mounted")
  }
})
let myrunoob=runoob.extend(options);
Vue.component('myrunoob',myrunoob)
// 建立根實例
new Vue({
  el: '#app',
  data () {
    return {
      //name: 'name'
    }
  },
  created(){
  // console.log("self created")
  },
  mounted(){
  // console.log("self mounted")
  }
})
</script>
</body>
打印出：
runoob created
extend created
runoob mounted
extend mounted
<h1>{{name}}</h1>中name的值是extends中data中定義的

mixins和extends均可以理解爲繼承
mixins接受的是一個數組能夠理解爲面相對象語言的多繼承，extends接受的是一個對象或函數，能夠理解爲單繼承；
Vue.extend 建立組件的構造函數,Vue.extend是爲了建立可複用的組件
mixins和extends是爲了擴展組件。
從源碼來看經過extend,extends和mixins三種方式接收的options,最終都是經過mergeOptions進行合併的.差別只是官方文檔中提到的優先級不一樣extend > extends > mixins. 因此,若是是簡單的擴展組件功能,三個方式均可以達到目的.
/*繼承鉤子函數*/
const extend = {
 created () {console.log('extends created')}
}
const mixin1 = {
 created () {console.log('mixin1 created')}
}
const mixin2 = {
 created () { console.log('mixin2 created')}
}
export default {
 extends: extend,
 mixins: [mixin1, mixin2],
 name: 'app',
 created () {
  console.log('created')
 }
}
輸出結果：
extends created
mixin1 created
mixin2 created
created
結論：
繼承鉤子函數的時候，是不進行覆蓋的，extends的鉤子函數先觸發，而後再是mixins的鉤子函數觸發，最後就是組件自身的鉤子函數觸發。extends優先級比mixins優先級高，先運行優先級高的鉤子函數。複製代碼
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。