最近在復習Vue的源碼，今天帶大家手寫實現(xiàn)一下Vue內(nèi)置組件component，比較簡單，最近面試有被問到。

前言

Vue大家都很熟悉，除了原生的組件，其自己也封裝了一下內(nèi)置組件，比如component，transition，keep-alive等等。

component算是用的比較多的了，當我們遇到需要根據(jù)不同條件顯示不同組件的時候，一般都是用component來實現(xiàn)。當然你也可以v-if，v-else-if，v-else，就顯的比較笨了。

大家如果沒用過，可以先自己嘗試一下這個component組件。最主要的就是它有一個is屬性，你給is賦予什么組件名，它就渲染什么組件。

內(nèi)置組件component的使用

我寫一個小demo演示一下。
先隨意的寫三個組件，A，B，C。

組件內(nèi)容就是aaaa，bbbb，cccc，方便我們辨認當然渲染的是哪個組件。

然后集體引入，掛載。

視圖內(nèi)容大概這樣寫，需求就是，準備三個按鈕，點擊哪個按鈕就顯示哪個組件。

    <div>
      <button @click="changeComp('A')">顯示A</button>
      <button @click="changeComp('B')">顯示B</button>
      <button @click="changeComp('C')">顯示C</button>
    </div>
    <component :is="compList"></component>

compList提前聲明好，默認是A組件。

  data() {
    return {
      compList: 'A'
    };
  },

changeComp函數(shù)內(nèi)容如下：

  methods: {
    changeComp(comp) {
      this.compList = comp;
    },
  }

OK，這就完事了，大家可以自己試一下，是可以完成既定的需求的。

component組件的原理分析

我們今天的任務是，了解內(nèi)置組件component的原理，并手寫實現(xiàn)一個。

那么component的實現(xiàn)原理是怎么樣的呢，這個就需要牽扯一塊比較大的知識鏈了，也是Vue的核心內(nèi)容。關于Vue的虛擬DOM以及模板編譯的部分內(nèi)容。

簡單來說，Vue內(nèi)部實現(xiàn)了一個虛擬DOM來妥善解決原生DOM的性能問題。

虛擬DOM與原生DOM

比如我們當前需要插入1000個DOM節(jié)點，如果是原生DOM來做的話，就是扎扎實實的，一個個操作，改變DOM，DOM需要被改變1000次，這對于性能是極大的損耗，造成很多的問題。

虛擬DOM的原理就是，先在框架內(nèi)部用對象模擬一下原生DOM的形態(tài)，記錄你這1000次的DOM操作，最后將DOM被操作1000次后的形態(tài)賦給原生DOM。這樣就能極大的優(yōu)化大量DOM操作帶來的負面影響。

然后再來思考一下，我們平時寫的.vue文件，其實跟原生寫法是有區(qū)別的，無論是HTML、JS還是CSS，在編寫階段有做了些許的改動，這樣做有助于提高我們的編寫效率。但是瀏覽器是只認原生的HTML、CSS和JS的，所以我們編寫的組件內(nèi)容，其實只是一個template模板，需要進行編譯轉換為原生的DOM才能渲染到瀏覽器上。

而componet組件其實就是內(nèi)部做了這個事情，將你傳入的組件， 先轉換為虛擬DOM，然后渲染為真實DOM，展示到視圖上。

render函數(shù)的使用

這里面就涉及到一個知識點了，關于render函數(shù)的使用，具體的內(nèi)容大家可以去Vue文檔詳細了解一下render函數(shù)?？赡艽蠹胰粘ｉ_發(fā)用的比較少，涉及一些偏底層的東西時才會遇到。

我這里只介紹render函數(shù)做的事情。
它的形態(tài)大概是這個樣式。

render(h) {
    // return h('A');
    return h('div', '6666');
},

render函數(shù)接收一個參數(shù)，比如叫它h，h也是一個函數(shù)，它的作用就是將傳入的內(nèi)容構建為虛擬DOM，這個傳入的內(nèi)容支持原生的寫法，也支持Vue組件。

比如我代碼里給出的，h('div', '6666')，h函數(shù)就會生成一個div組件，文本內(nèi)容是666。被注釋掉的，就是傳入Vue中自己的寫的組件名字為A，同樣支持。

但是h函數(shù)僅僅只是將傳入的內(nèi)容，生成虛擬DOM，不是真實的原生DOM，然后將它return出去，render函數(shù)才會將這個虛擬DOM渲染成為真實DOM。

上述關于render函數(shù)的內(nèi)容不知道大家是否理解，可以去Vue官方文檔里，詳細看一下，然后自己寫寫demo體驗一下，render函數(shù)算是Vue進階中比較重要的內(nèi)容了。

所以，話說回來，知道了render函數(shù)這個東西，我們就能夠比較好的實現(xiàn)component這個內(nèi)置組件了。component組件會接收一個屬性is，is的值就是我們要渲染的組件。component組件的內(nèi)容其實就是進行了 Vue組件 => 虛擬DOM => 真實DOM，渲染視圖，其實就通過render函數(shù)實現(xiàn)就可以。

嘗試手寫實現(xiàn)component

話不多說，我們試一下。

因為組件內(nèi)容比較少，所以我們直接使用Vue.component來編寫組件內(nèi)容。

Vue.component("myComponent", {
  props: ["is"],
  render(h) {
    return h(this.is);
  },
});

其實核心代碼就上面這幾行，組件名字是myComponent，props的作用就是指定組件要接收的參數(shù)is。然后編寫一下render函數(shù)，因為是渲染Vue組件，所以直接return h(this.is)就可以。

將這段代碼寫在JS里，然后就可以使用了。記得要import Vue from 'vue'來引入Vue，因為我們是通過Vue.component來編寫組件的。

下面我們試一試，這個myComponent是否有用。

    <div>
      <button @click="changeComp('A')">顯示A</button>
      <button @click="changeComp('B')">顯示B</button>
      <button @click="changeComp('C')">顯示C</button>
    </div>
    <component :is="compList"></component>
    <my-component :is="compList"></my-component>

實際操作后可以發(fā)現(xiàn)，我們自己寫的myComponent和Vue內(nèi)置的component效果是一模一樣的，大家自己也可以試一下。

完整代碼：

<template>
  <div>
    <div>
      <button @click="changeComp('A')">顯示A</button>
      <button @click="changeComp('B')">顯示B</button>
      <button @click="changeComp('C')">顯示C</button>
    </div>
    <component :is="compList"></component>
    <my-component :is="compList"></my-component>
  </div>
</template>

<script>
import Vue from "vue";
import A from "../components/A.vue";
import B from "../components/B.vue";
import C from "../components/C.vue";

Vue.component("myComponent", {
  props: ["is"],
  render(h) {
    return h(this.is);
  },
});
export default {
  components: {
    A,
    B,
    C,
  },
  data() {
    return {
      compList: 'A'
    };
  },
  methods: {
    changeComp(comp) {
      this.compList = comp;
    },
  },
};
</script>

<style scoped>

</style>

總結

今天的內(nèi)容是帶著大家手寫實現(xiàn)Vue的內(nèi)置組件component，在嘗試實現(xiàn)某一個東西的時候，就需要先思考它的作用以及內(nèi)部原理。手寫component的過程比較簡單，但是涉及到了很多Vue的原理性知識點，比如虛擬DOM、render函數(shù)、模板編譯等。

到此這篇關于手寫Vue內(nèi)置組件component的實現(xiàn)示例的文章就介紹到這了,更多相關Vue內(nèi)置組件component內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論