深入淺析Vue中mixin和extend的區(qū)別和使用場(chǎng)景

更新時(shí)間：2019年08月01日 09:22:58 作者：an3wer

Vue中有兩個(gè)較為高級(jí)的靜態(tài)方法mixin和extend，接下來給大家介紹Vue中mixin和extend的區(qū)別和使用場(chǎng)景，感興趣的朋友一起看看吧

Vue中有兩個(gè)較為高級(jí)的靜態(tài)方法mixin和extend，接下來我們來討論下關(guān)于他們各自的原理和使用場(chǎng)景。

Mixin：

原理：

先來看看官網(wǎng)的介紹：

參數(shù)：{Object} mixin

用法：

混入也可以進(jìn)行全局注冊(cè)。使用時(shí)格外小心！一旦使用全局混入，它將影響每一個(gè)之后創(chuàng)建的 Vue 實(shí)例。使用恰當(dāng)時(shí)，這可以用來為自定義選項(xiàng)注入處理邏輯。

// 為自定義的選項(xiàng) 'myOption' 注入一個(gè)處理器。
   Vue.mixin({
    created: function () {
     var myOption = this.$options.myOption
     if (myOption) {
      console.log(myOption)
     }
    }
   })
   
   new Vue({
    myOption: 'hello!'
   })
   // => "hello!"

我們知道，Vue.mixin傳遞的這個(gè)參數(shù)對(duì)象，在初始化Vue實(shí)例的時(shí)候會(huì)merge到options上，下面是Vue源碼中對(duì)mixin的操作。

// src\core\global-api\mixin.js
 export function initMixin (Vue: GlobalAPI) {
  Vue.mixin = function (mixin: Object) {
   this.options = mergeOptions(this.options, mixin)
   return this
  }
 }
// src\core\instance\index.js
 function Vue (options) {
   if (process.env.NODE_ENV !== 'production' &&
   !(this instanceof Vue)
   ) {
   warn('Vue is a constructor and should be called with the `new` keyword')
   }
   this._init(options)
 }
 
 initMixin(Vue)
 ...
 
 export default Vue

也就是說，mixin只是對(duì)我們?cè)诔跏蓟疺ue實(shí)例時(shí)傳遞的配置對(duì)象的一個(gè)擴(kuò)展。

就像上面官網(wǎng)實(shí)例寫的例子，我們?cè)趫?zhí)行Vue.mixin方法時(shí)傳遞一個(gè)配置對(duì)象進(jìn)去，對(duì)象里面有個(gè)created勾子函數(shù)，通過源碼我們可以看到這個(gè)傳遞進(jìn)來的對(duì)象最終會(huì)和我們?cè)诔跏蓟瘜?shí)例也就是new Vue(options)時(shí)的這個(gè)options合并(通過上面源碼中的mergeOptions方法),保存在option上。

使用場(chǎng)景：

當(dāng)我們需要全局去注入一些methods,filter或者h(yuǎn)ooks時(shí)我們就可以使用mixin來做。比如我們希望每一個(gè)Vue實(shí)例都有一個(gè)print方法，我們就可以這么做：

Vue.mixin({
    methods: {
      print() {
        console.log(`我是一個(gè)通過mixin注入的方法！`)
      }
    }
  })

或者我們想要去監(jiān)聽在什么階段時(shí)什么組件被加載了，被卸載了等等，我們可以這么做：

Vue.mixin({
    mounted() {
      console.log(`${this.$route.name} component mounted!`)
    },
    destroyed() {
      console.log(`${this.$route.name} component destroyed!`)
    }
  })

如果我們并不想給每一個(gè)組件實(shí)例都混入這些配置options，而只是個(gè)別的組件，最好不要使用mixin，它可能會(huì)影響到我們組件的性能。

Extend：

原理：

先來看看官網(wǎng)的介紹：

參數(shù)：{Object} options

用法：

使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個(gè)“子類”。參數(shù)是一個(gè)包含組件選項(xiàng)的對(duì)象。

data 選項(xiàng)是特例，需要注意 - 在 Vue.extend() 中它必須是函數(shù)。

data必須是函數(shù)是為了防止各個(gè)實(shí)例的數(shù)據(jù)混亂，閉包的應(yīng)用。

<div id="mount-point"></div>
// 創(chuàng)建構(gòu)造器
var Profile = Vue.extend({
 template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
 data: function () {
  return {
   firstName: 'Walter',
   lastName: 'White',
   alias: 'Heisenberg'
  }
 }
})
// 創(chuàng)建 Profile 實(shí)例，并掛載到一個(gè)元素上。
new Profile().$mount('#mount-point')

再來看看源碼里面關(guān)于Vue.extend的實(shí)現(xiàn)：

Vue.extend = function (extendOptions: Object): Function {
  extendOptions = extendOptions || {}
  const Super = this
  const SuperId = Super.cid
  const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
  if (cachedCtors[SuperId]) {
   return cachedCtors[SuperId]
  }

  const name = extendOptions.name || Super.options.name
  if (process.env.NODE_ENV !== 'production' && name) {
   validateComponentName(name)
  }

  const Sub = function VueComponent (options) {
   this._init(options)
  }
  Sub.prototype = Object.create(Super.prototype)
  Sub.prototype.constructor = Sub
  Sub.cid = cid++
  Sub.options = mergeOptions(
   Super.options,
   extendOptions
  )
  Sub['super'] = Super

  // For props and computed properties, we define the proxy getters on
  // the Vue instances at extension time, on the extended prototype. This
  // avoids Object.defineProperty calls for each instance created.
  if (Sub.options.props) {
   initProps(Sub)
  }
  if (Sub.options.computed) {
   initComputed(Sub)
  }

  // allow further extension/mixin/plugin usage
  Sub.extend = Super.extend
  Sub.mixin = Super.mixin
  Sub.use = Super.use

  // create asset registers, so extended classes
  // can have their private assets too.
  ASSET_TYPES.forEach(function (type) {
   Sub[type] = Super[type]
  })
  // enable recursive self-lookup
  if (name) {
   Sub.options.components[name] = Sub
  }

  // keep a reference to the super options at extension time.
  // later at instantiation we can check if Super's options have
  // been updated.
  Sub.superOptions = Super.options
  Sub.extendOptions = extendOptions
  Sub.sealedOptions = extend({}, Sub.options)

  // cache constructor
  cachedCtors[SuperId] = Sub
  return Sub
 }
}

首先我們可以看到，extend方法返回的Sub其實(shí)是一個(gè)構(gòu)造函數(shù)，而且繼承自Vue，也就是說extend方法返回的是Vue的一個(gè)子類。

Sub.prototype = Object.create(Super.prototype)
  Sub.prototype.constructor = Sub

這兩行代碼其實(shí)就是實(shí)現(xiàn)Sub對(duì)Vue的繼承，源碼中有一行是

const Super = this

所以這里的Super指的就是Vue。

Sub.options = mergeOptions(
   Super.options,
   extendOptions
)

我們注意到在extend中也會(huì)對(duì)傳進(jìn)來的配置option和Vue原來的options做一個(gè)合并。

使用場(chǎng)景：

當(dāng)我們不需要全局去混入一些配置，比如，我們想要獲得一個(gè)component。我們可以使用Vue.component(),也可以使用Vue.extend()。

const ChildVue = Vue.extend({
  ...options
})

new ChildVue({
  ...options
})

注意extend得到的是一個(gè)Vue的子類，也就是構(gòu)造函數(shù)。

區(qū)別：

mixin是對(duì)Vue類的options進(jìn)行混入。所有Vue的實(shí)例對(duì)象都會(huì)具備混入進(jìn)來的配置行為。

extend是產(chǎn)生一個(gè)繼承自Vue類的子類，只會(huì)影響這個(gè)子類的實(shí)例對(duì)象，不會(huì)對(duì)Vue類本身以及Vue類的實(shí)例對(duì)象產(chǎn)生影響。

總結(jié)

以上所述是小編給大家介紹的Vue中mixin和extend的區(qū)別和使用場(chǎng)景,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: