vue中使用mixins/extends傳入?yún)?shù)的方式

更新時(shí)間：2022年05月24日 10:53:20 作者：前端開(kāi)發(fā)終生學(xué)習(xí)者

這篇文章主要介紹了vue中使用mixins/extends傳入?yún)?shù)的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

使用mixins/extends傳入?yún)?shù)

最近做報(bào)表頁(yè)面，基本都是列表頁(yè)面，所以想用mixins。

但是接口的url不同，于是考慮怎么才能傳入?yún)?shù)去適配各個(gè)頁(yè)面。

后來(lái)發(fā)現(xiàn)mixin文件可以寫(xiě)個(gè)函數(shù)，接受傳遞過(guò)來(lái)的參數(shù)，然后return一個(gè)對(duì)象。

大概如下：

mixin.js

export default function(config) {
? ? let {
? ? ? ? listUrl="",
? ? ? ? exportUrl=""
? ? } = config;
? ? return {
? ? ? ? created() {
? ? ? ? ? ? console.log(listUrl);
? ? ? ? ? ? console.log(exportUrl);
? ? ? ? }
? ? }
}

xxx.vue

import Mixin from './mixin';
let mixin = new Mixin({
? ? listUrl: "www.baidu.com",
? ? exportUrl: "www.yahu.com"
})
?
export default{
? ? mixins:[mixin],
}

extends也是差不多。

vue mixins的原理

以前一直以為mixins在vue里面應(yīng)該不是很重要，只是提供了一個(gè)混入的api，慢慢的才知道m(xù)ixin在vue里面非常重要。生命周期、vuex等都有mixin的影子，在內(nèi)部算是很重要的一個(gè)api。

先上精簡(jiǎn)過(guò)后的源碼：

export const LIFECYCLE_HOOKS = [
? ? 'beforeCreate',
? ? 'created',
? ? 'beforeMount',
? ? 'mounted',
? ? 'beforeUpdate',
? ? 'updated',
? ? 'beforeDestroy',
? ? 'destroyed',
]
const strats = {};
function mergeHook(parentVal, childValue) {
? ? if (childValue) {
? ? ? ? if (parentVal) {
? ? ? ? ? ? return parentVal.concat(childValue);
? ? ? ? } else {
? ? ? ? ? ? return [childValue]
? ? ? ? }
? ? } else {
? ? ? ? return parentVal;
? ? }
}
LIFECYCLE_HOOKS.forEach(hook => {
? ? strats[hook] = mergeHook
})

上面這部分很好理解，是生命周期的合并，下面判斷有這些生命周期的key的時(shí)候，直接調(diào)用strats[key](parent[key], child[key])，我們都知道生命周期的mixins是先執(zhí)行mixins的再執(zhí)行當(dāng)前組件的，所以直接concat，后面執(zhí)行循環(huán)調(diào)用的時(shí)候就是這個(gè)順序。

export function mergeOptions(parent, child) {
? ? const options = {}
? ? if (child.mixins) {
? ? ? ? for (var i = 0, l = child.mixins.length; i < l; i++) {
? ? ? ? ? ? var mixin = child.mixins[i];
? ? ? ? ? ? parent = mergeOptions(parent, mixin);
? ? ? ? }
? ? }
? ? for (let key in parent) {
? ? ? ? mergeField(key)
? ? }
? ? for (let key in child) {
? ? ? ? if (!parent.hasOwnProperty(key)) {
? ? ? ? ? ? mergeField(key);
? ? ? ? }
? ? }
? ? function mergeField(key) {
? ? ? ? if (strats[key]) {
? ? ? ? ? ? options[key] = strats[key](parent[key], child[key]);
? ? ? ? } else {
? ? ? ? ? ? if (typeof parent[key] == 'object' && typeof child[key] == 'object') {
? ? ? ? ? ? ? ? options[key] = {
? ? ? ? ? ? ? ? ? ? ...parent[key],
? ? ? ? ? ? ? ? ? ? ...child[key]
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? options[key] = child[key];
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? return options
}

這邊生命周期是單獨(dú)判斷，其他熟悉方法則是一起的，比如方法methods，如果父和子都有，就結(jié)構(gòu)合并在一起。因?yàn)閙ixins用法可以傳入一個(gè)數(shù)組，這邊還需要優(yōu)先判斷是否有mixins字段，有就要遞歸合并。

核心有了其他都是調(diào)用了，比如把mixin方法掛載到vue上可以直接調(diào)用：

Vue.mixin = function (mixin) {
? ? // 將屬性合并到Vue.options上
? ? this.options = mergeOptions(this.options,mixin);
? ? return this;
}

初始化的時(shí)候先合并一次，生命周期也是，在狀態(tài)初始化之前先調(diào)用beforeCreate，初始化之后調(diào)用created，源碼搜索Vue.prototype._init這個(gè)方法里面就能看見(jiàn)，包括其他生命周期，可以搜索callhook去看看：

vm.$options = mergeOptions(vm.constructor.options,options);
callHook(vm,'beforeCreate');

// 初始化狀態(tài)

initState(vm);
callHook(vm,'created');

callHook就是循環(huán)調(diào)用生命周期：

export function callHook(vm, hook) {
? ? const handlers = vm.$options[hook];
? ? if (handlers) {
? ? ? ? for (let i = 0; i < handlers.length; i++) {
? ? ? ? ? ? handlers[i].call(vm);
? ? ? ? }
? ? }
}

mixin方法核心就是合并實(shí)例的屬性，watch、methods、data等，也可以新增一開(kāi)始沒(méi)有的屬性，比如vuex的$store。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: