Vue extend使用範例深入分析

2022-08-23 14:00:41

一、使用場景

按需使用元件，也叫懶載入，效能蹭蹭往上走

擴充套件的元件，其自由度高到你無法想象

二、補充元件註冊

平日裡，我們使用元件：

黃金玩家：

<template>
    <A/>
</template>
import A from "./A.vue";
export default {
  components: {
    A
  },
}

鉑金玩家

import Vue from "vue"
import A from "./A"
  Vue.component("A", A)

鑽石玩家

import Vue from "vue";
// 檢索目錄下的模組
const req = require.context(".", true, /.vue$/);
req.keys().forEach(fileName => {
  // require模組
    const componentConfig = req(fileName);
    const name =
      fileName.name ||
      fileName.replace(/^./(.*/)?/, "").replace(/.vue$/, "");
      Vue.component(name, componentConfig.default || componentConfig);
});

王者玩家

不必多說，今日主角！閃亮登場！

   // 建立一個構造器
    const Constructor = Vue.extend(test);
    // 利用建構函式建立範例
    //建立過程中可 向元件中傳入資料
    const instance = new Constructor({
      propsData:{
        age:'23'
      }
    });
    // instance.age = 29
    // 掛載到某個dom上
    instance.$mount(this.$refs.container)

三、深度解析

聊聊天

為什麼我會對其讚不絕口，我收了錢嗎？也有可能。

迴歸正題，開始聊這個之前先提一下vue的工作機制，尤其是cli的打包運作。在專案完成後，執行命令打包，只會將專案裡用到的 .vue、.js、.css、.json、.svg等等檔案進行打包，所以如果你是從老專案遷移開發，原本幾百兆的資料夾，打包後可能只有十幾二十兆，當然這需要你的懶載入做的比較好。

上面說的還是有點抽象，說點我們能感知到的。假設你寫了下面這麼一個元件test.vue，但是你腦子轉太快了，以至於手速都跟不上，所以，你犯錯了，age沒定義你就使用了，那勢必會報錯對吧？其實並不會，你不匯入，不使用它，一點事情沒有，它只會在那錯下去孤獨終老。

<template>
  <div class="container">
    我是擴充套件，掛接外面的div的元件啦
    <div>{{ age }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  }
};

但是你只要一匯入，使用，立馬報錯：

再次回到剛剛那個點：你不引入它，就不會報錯。那按需引入，使用到才引入，有沒有一種辦法，我使用的時候再傳age給test元件呢？豈不是美哉？Vue.extend()就可以完美做到！

再淺談一下Vue.extend()是個啥

他也不是什麼特別高大上的東西，官方說是個繼承構造器，講人話就是建構函式。通過建構函式可以範例化物件，這個建構函式很特殊，他是Vue建構函式的子建構函式，繼承與Vue的Constructor()，所以理所當然的，他的引數就與Vue的引數一樣：

上個例子瞧瞧

子元件宣告props接收

<template>
  <div class="container">我是擴充套件，掛接外外面的div的元件啦
  <div>{{age}}</div>
  </div>
</template>
<script>
export default {
   props: {
     age: {
       type: String,
       default: ""
    }
  }
};

父元件用extend控制範例化這個物件並掛載到對應DOM上，可以使用propData進行傳值

<template>
  <div ref="container" class="container">
  </div>
</template>
<script>
import Vue from "vue";
import test from "./components/Vue.extend/test";
export default {
  mounted() {
    // 建立一個構造器
    const Constructor = Vue.extend(test);
    // 利用建構函式建立範例
    //建立過程中可 向元件中傳入資料
    const instance = new Constructor({
      propsData:{
        age:'23'
      }
    });
    // 掛載到某個dom上
    instance.$mount(this.$refs.container)
  },
  methods: {}
};
</script>

亮點是什麼呢？這裡的test元件的prop可以直接去掉：

<template>
  <div class="container">我是擴充套件，掛接外外面的div的元件啦
  <div>{{age}}</div>
  </div>
</template>

父元件中以範例屬性形式網上掛接資料，自由度真的太高了！！！這樣運用起來，可以封裝出意想不到的元件庫。現在主流UI庫的很多巧妙邏輯都是使用了，Vue.extend(),只不過是搭配上函數對懶載入進行控制

<template>
  <div ref="container" class="container">
  </div>
</template>
<script>
import Vue from "vue";
import test from "./components/Vue.extend/test";
export default {
  mounted() {
    // 建立一個構造器
    const Constructor = Vue.extend(test);
    // 利用建構函式建立範例
    //建立過程中可 向元件中傳入資料
    const instance = new Constructor();
    //可以直接以屬性方式掛接到範例上
    instance.age = 29
    // 掛載到某個dom上
    instance.$mount(this.$refs.container)
  },
};
</script>

到此這篇關於Vue extend使用範例深入分析的文章就介紹到這了,更多相關Vue extend內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Vue extend使用範例深入分析

目錄

一、使用場景

二、補充元件註冊

三、深度解析

熱門文章