說說你對vue的mixin的理解，有什麼應用場景？

来源:https://www.cnblogs.com/smileZAZ/p/18049004
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 一、mixin是什麼 Mixin是面向對象程式設計語言中的類，提供了方法的實現。其他類可以訪問mixin類的方法而不必成為其子類 Mixin類通常作為功能模塊使用，在需要該功能時“混入”，有利於代碼復用又避免了多繼承的複雜 Vue中的mi ...


這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

一、mixin是什麼

Mixin是面向對象程式設計語言中的類，提供了方法的實現。其他類可以訪問mixin類的方法而不必成為其子類

Mixin類通常作為功能模塊使用，在需要該功能時“混入”，有利於代碼復用又避免了多繼承的複雜

Vue中的mixin

先來看一下官方定義

mixin（混入），提供了一種非常靈活的方式，來分發 Vue 組件中的可復用功能。

本質其實就是一個js對象，它可以包含我們組件中任意功能選項，如data、components、methods、created、computed等等

我們只要將共用的功能以對象的方式傳入 mixins選項中，當組件使用 mixins對象時所有mixins對象的選項都將被混入該組件本身的選項中來

在Vue中我們可以局部混入跟全局混入

局部混入

定義一個mixin對象，有組件options的data、methods屬性

var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

組件通過mixins屬性調用mixin對象

Vue.component('componentA',{
  mixins: [myMixin]
})

該組件在使用的時候，混合了mixin裡面的方法，在自動執行created生命鉤子，執行hello方法

全局混入

通過Vue.mixin()進行全局的混入

Vue.mixin({
  created: function () {
      console.log("全局混入")
    }
})

使用全局混入需要特別註意，因為它會影響到每一個組件實例（包括第三方組件）

PS：全局混入常用於插件的編寫

註意事項：

當組件存在與mixin對象相同的選項的時候，進行遞歸合併的時候組件的選項會覆蓋mixin的選項

但是如果相同選項為生命周期鉤子的時候，會合併成一個數組，先執行mixin的鉤子，再執行組件的鉤子

二、使用場景

在日常的開發中，我們經常會遇到在不同的組件中經常會需要用到一些相同或者相似的代碼，這些代碼的功能相對獨立

這時，可以通過Vue的mixin功能將相同或者相似的代碼提出來

舉個例子

定義一個modal彈窗組件，內部通過isShowing來控制顯示

const Modal = {
  template: '#modal',
  data() {
    return {
      isShowing: false
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  }
}

定義一個tooltip提示框，內部通過isShowing來控制顯示

const Tooltip = {
  template: '#tooltip',
  data() {
    return {
      isShowing: false
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  }
}

通過觀察上面兩個組件，發現兩者的邏輯是相同，代碼控制顯示也是相同的，這時候mixin就派上用場了

首先抽出共同代碼，編寫一個mixin

const toggle = {
  data() {
    return {
      isShowing: false
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  }
}

兩個組件在使用上，只需要引入mixin

const Modal = {
  template: '#modal',
  mixins: [toggle]
};
 
const Tooltip = {
  template: '#tooltip',
  mixins: [toggle]
}

通過上面小小的例子，讓我們知道了Mixin對於封裝一些可復用的功能如此有趣、方便、實用

三、源碼分析

首先從Vue.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
  }
}

主要是調用merOptions方法

源碼位置：/src/core/util/options.js

export function mergeOptions (
  parent: Object,
  child: Object,
  vm?: Component
): Object {

if (child.mixins) { // 判斷有沒有mixin 也就是mixin裡面掛mixin的情況 有的話遞歸進行合併
    for (let i = 0, l = child.mixins.length; i < l; i++) {
    parent = mergeOptions(parent, child.mixins[i], vm)
    }
}

  const options = {} 
  let key
  for (key in parent) {
    mergeField(key) // 先遍歷parent的key 調對應的strats[XXX]方法進行合併
  }
  for (key in child) {
    if (!hasOwn(parent, key)) { // 如果parent已經處理過某個key 就不處理了
      mergeField(key) // 處理child中的key 也就parent中沒有處理過的key
    }
  }
  function mergeField (key) {
    const strat = strats[key] || defaultStrat
    options[key] = strat(parent[key], child[key], vm, key) // 根據不同類型的options調用strats中不同的方法進行合併
  }
  return options
}

從上面的源碼，我們得到以下幾點：

  • 優先遞歸處理 mixins
  • 先遍歷合併parent 中的key，調用mergeField方法進行合併，然後保存在變數options
  • 再遍歷 child，合併補上 parent 中沒有的key，調用mergeField方法進行合併，保存在變數options
  • 通過 mergeField 函數進行了合併

下麵是關於Vue的幾種類型的合併策略

  • 替換型
  • 合併型
  • 隊列型
  • 疊加型

替換型

替換型合併有props、methods、inject、computed

strats.props =
strats.methods =
strats.inject =
strats.computed = function (
  parentVal: ?Object,
  childVal: ?Object,
  vm?: Component,
  key: string
): ?Object {
  if (!parentVal) return childVal // 如果parentVal沒有值，直接返回childVal
  const ret = Object.create(null) // 創建一個第三方對象 ret
  extend(ret, parentVal) // extend方法實際是把parentVal的屬性複製到ret中
  if (childVal) extend(ret, childVal) // 把childVal的屬性複製到ret中
  return ret
}
strats.provide = mergeDataOrFn

同名的props、methods、inject、computed會被後來者代替

合併型

和並型合併有：data

strats.data = function(parentVal, childVal, vm) {    
    return mergeDataOrFn(
        parentVal, childVal, vm
    )
};

function mergeDataOrFn(parentVal, childVal, vm) {    
    return function mergedInstanceDataFn() {        
        var childData = childVal.call(vm, vm) // 執行data掛的函數得到對象
        var parentData = parentVal.call(vm, vm)        
        if (childData) {            
            return mergeData(childData, parentData) // 將2個對象進行合併                                 
        } else {            
            return parentData // 如果沒有childData 直接返回parentData
        }
    }
}

function mergeData(to, from) {    
    if (!from) return to    
    var key, toVal, fromVal;    
    var keys = Object.keys(from);   
    for (var i = 0; i < keys.length; i++) {
        key = keys[i];
        toVal = to[key];
        fromVal = from[key];    
        // 如果不存在這個屬性，就重新設置
        if (!to.hasOwnProperty(key)) {
            set(to, key, fromVal);
        }      
        // 存在相同屬性，合併對象
        else if (typeof toVal =="object" && typeof fromVal =="object") {
            mergeData(toVal, fromVal);
        }
    }    
    return to
}

mergeData函數遍歷了要合併的 data 的所有屬性，然後根據不同情況進行合併：

  • 當目標 data 對象不包含當前屬性時，調用 set 方法進行合併（set方法其實就是一些合併重新賦值的方法）
  • 當目標 data 對象包含當前屬性並且當前值為純對象時，遞歸合併當前對象值，這樣做是為了防止對象存在新增屬性

隊列性

隊列性合併有：全部生命周期和watch

function mergeHook (
  parentVal: ?Array<Function>,
  childVal: ?Function | ?Array<Function>
): ?Array<Function> {
  return childVal
    ? parentVal
      ? parentVal.concat(childVal)
      : Array.isArray(childVal)
        ? childVal
        : [childVal]
    : parentVal
}

LIFECYCLE_HOOKS.forEach(hook => {
  strats[hook] = mergeHook
})

// watch
strats.watch = function (
  parentVal,
  childVal,
  vm,
  key
) {
  // work around Firefox's Object.prototype.watch...
  if (parentVal === nativeWatch) { parentVal = undefined; }
  if (childVal === nativeWatch) { childVal = undefined; }
  /* istanbul ignore if */
  if (!childVal) { return Object.create(parentVal || null) }
  {
    assertObjectType(key, childVal, vm);
  }
  if (!parentVal) { return childVal }
  var ret = {};
  extend(ret, parentVal);
  for (var key$1 in childVal) {
    var parent = ret[key$1];
    var child = childVal[key$1];
    if (parent && !Array.isArray(parent)) {
      parent = [parent];
    }
    ret[key$1] = parent
      ? parent.concat(child)
      : Array.isArray(child) ? child : [child];
  }
  return ret
};

生命周期鉤子和watch被合併為一個數組，然後正序遍歷一次執行

疊加型

疊加型合併有：component、directives、filters

strats.components=
strats.directives=

strats.filters = function mergeAssets(
    parentVal, childVal, vm, key
) {    
    var res = Object.create(parentVal || null);    
    if (childVal) { 
        for (var key in childVal) {
            res[key] = childVal[key];
        }   
    } 
    return res
}

疊加型主要是通過原型鏈進行層層的疊加

小結：

  • 替換型策略有props、methods、inject、computed，就是將新的同名參數替代舊的參數
  • 合併型策略是data, 通過set方法進行合併和重新賦值
  • 隊列型策略有生命周期函數和watch，原理是將函數存入一個數組，然後正序遍歷依次執行
  • 疊加型有component、directives、filters，通過原型鏈進行層層的疊加

參考文獻

  • https://zhuanlan.zhihu.com/p/31018570
  • https://juejin.cn/post/6844904015495446536#heading-1
  • https://juejin.cn/post/6844903846775357453
  • https://vue3js.cn/docs/zh

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Android 修改系統息屏時間.
    Android 修改系統息屏時間. 本篇文章主要記錄下android 如何修改手機息屏時間. 目前手機屏幕超時的時間範圍一般是: 15秒 30秒 1分鐘 2分鐘 5分鐘 10分鐘 30分鐘 那如何設置超過30分鐘呢? 代碼很簡單,如下: private void changeScreenOffTim ...
  • Flutter組件
    兩個常用的組件：Material和Scaffold修飾App和H5一樣很固定。 1.Container 2.Text 3.picture import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( home: S ...
  • Glide源碼解析四（解碼和轉碼）
    本文基於Glide 4.11.0 Glide載入過程有一個解碼過程，比如將url載入為inputStream後，要將inputStream解碼為Bitmap。 從Glide源碼解析一我們大致知道了Glide載入的過程，所以我們可以直接從這裡看起，在這個過程中我們以從文件中載入bitmap為例： De ...
  • flutter3-winchat桌面端聊天實例|Flutter3+Dart3+Getx仿微信Exe程式
    首發原創flutter3+bitsdojo_window+getx客戶端仿微信exe聊天Flutter-WinChat。 flutter3-dart3-winchat 基於flutter3+dart3+getx+bitsdojo_window+file_picker+media_kit等技術開發桌面 ...
  • 打通SwiftUI任督二脈
    序言 開年的第一篇文章，今天分享的是SwiftUI，SwiftUI出來好幾年，之前一直沒學習，所以現在才開始；如果大家還留在 iOS 開發，這們語言也是一個趨勢； 目前待業中.... 不得不說已逝的2023年，大家開始都抱著一解封，經濟都會向上轉好，可是現實不是我們想象那樣；目前我也在學習 Swif ...
  • 說說你對keep-alive的理解是什麼？
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 一、Keep-alive 是什麼 keep-alive是vue中的內置組件，能在組件切換過程中將狀態保留在記憶體中，防止重覆渲染DOM keep-alive 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們 keep-alive可以設 ...
  • js頁面當中沒有寫回車事件，但是有回車效果
    寫在前面 按照國際慣例，要先聊下生活，吐槽一番，今天是2月14日，也是下午聽老媽說，我才知道！ 現在真的是對日期節日已經毫無概念可言，只知道星期幾。 現在已經覺得寫博客也好，學習文章也罷，和寫日記一樣，已經融入到我的生活中，或者更確切的說，變成生活的一部分了。 飯後和老媽閑聊了幾句後，我發現現在真的 ...
  • RCE_STUDY
    概念 RCE(Remote code execution）遠程代碼執行漏洞，RCE又分命令執行和代碼執行。 RCE-遠程代碼執行：遠程執行PHP代碼 RCE-遠程命令執行：遠程執行Linux或者Windows等系統命令。 常見函數有： PHP：eval(),assert(),preg_replace ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類