• 什麼是模組化？

module：模組化是從程式碼設計的角度分析，抽離為單個的模組。高內聚，低耦合的公共程式碼。

• 什麼是元件化？

component ：元件化是從UI的角度分析，抽離為單個的元件。例如列表在app內很多頁面都有用到，我們便可以抽離為元件。

無論是模組化還是元件化，目的都是為了提高程式碼複用性，便於後期的維護和開發。

VUE專案使用元件時，使用import匯入，那麼.vue模版檔案中的script中export defult匯出的是否是一個元件？

匯出的並不是一個元件，.vue

模版中template js style組合而成的檔案才是一個元件。

不是一個元件為何能使用？

關鍵點在於webpack中的vue-loader，它能夠幫你把單個檔案執行自定義的loader鏈。

1.0.1 虛擬DOM（Document Object Model）

一個網頁呈獻的過程：

1. 瀏覽器請求伺服器獲取html程式碼
2. 瀏覽器在記憶體中獲取解析DOM tree
3. 瀏覽器渲染DOM tree呈獻頁面

需求

渲染一個通過網路請求返回的表格，點選表頭部分的排序按鈕，需要對錶格進行排序。

通常的方法

1. 獲取陣列拼接程式碼
2. 新增到HTML標籤中
3. 通過js排序修改陣列順序
4. 拼接好HTML
5. 渲染到頁面

這種方法能夠實現需求，但是對頁面的渲染消耗大，假設資料量很大，只改變其中的兩條資料，不需要排序的元素也需要重新渲染到頁面。

解決方案：

1. 獲取需要渲染元素的DOM tree 和現在需要渲染的DOM tree
2. 進行比較
3. 改變了的DOM記錄下來
4. 刪除原來的需要改變的元素
5. 渲染現在改變的元素

設想解決方案有了那麼按照做就行了，但是瀏覽器中沒有獲取DOM tree的api，於是react庫便出現了，不需要真實的DOM，模擬出來的DOM依然可以滿足需求實現按需更新。於是有了diff演算法

1.0.2 Diff 演算法

//html
    <h1 id="title" title="h1" data-poit="9">標題</h1>
//對應的DOM tree
    <script>
        const h1 = {
            targetName: 'h1',
            arrts: {
                id: "title",
                title: "h1",
                "data-poit": "9"
                    },
             childrens: [
                "標題"
                       ]
                    }
    </script>

• tree diff
• component diff
• element diff

新舊兩棵DOM tree，逐層進行對比，便是 Tree diff 當整棵樹都對比完畢，則需要按需更新的元件，必然能夠找到。

元件之間的對比，每一層級中的元件進行對比

在進行元件對比的時候，如果型別相同則需要元素級別之間的對比，叫做element diff

以上為react 面試談話內容