深入理解vue.js——元件

熟悉vue或者研究過vue原始碼的同學都知道，元件是vue最重要的部分之一，而寫元件由兩種常見的方式：

• template模板

• render渲染函式式的

template式的元件

template式的元件有兩種常見的形式：

第一種：

Vue.component('hello', {
    data() {        return {
            msg: 'hello world.'
        }
    }
})

第二種：

Vue.component('hello', {    data() {        return {
            msg: 'hello world.'
        }
    },
    template: `
 {{ msg }} 
`
})

在專案開發中，第一種比較常見。

render渲染函式元件

同樣，vue本身也提供了效能更高的render函式渲染的元件。

Vue.component('hello', {
    data() {        return {            msg: 'hello world.'
        }
    },    render: function(el) {        return el(            'div',            this.msg
        )
    }
})

關於render的用法，可以參考vue.js官方文件介紹。

關於render的示例，可以參考bootstrap-vue的原始碼，它的元件很多都是使用render的。

render函式渲染 VS template模板

• 後者適合邏輯簡單，前者適合複雜邏輯。

• 後者屬於宣告是渲染，前者屬於自定Render函式。宣告式渲染，使用者理解起來相對容易，但靈活性不足；自定義render函式靈活性高，但對使用者要求較高。

• 前者的效能較高，後者效能較低。這一點我們可以看一下，下圖中vue元件渲染的流程圖可知。

• 基於上一點，我們透過vue元件渲染流程圖知道，使用render函式渲染沒有編譯過程，相當於使用者直接將程式碼給程式。所以，使用它對使用者要求高，且易出現錯誤。

vue元件渲染的流程圖

特殊元件

在vue中有一個特殊的元件，示例程式碼如下：

var vm = new Vue({
    data() {        return {            msg: 'hello world.'
        }
    },    el: '#app'})

這個特殊的元件指定我們使用vue的容器，並初始化一些資料。

虛擬DOM

虛擬DOM是vue.js的核心概念之一，vue.js使用js模擬DOM原型樹，這就是我們常掛在嘴邊的VNode。

vue.js發現模板的資料發生改變（vue是資料驅動的框架，這也是MVVM與傳統的DOM結構驅動的區別），將會生成新的虛擬DOM，vue.js透過Diff演算法來對比跟原來的Vnode是否相同來決定是否渲染該虛擬DOM，不相同則渲染。同時，vue2.x支援服務端的渲染。

後續可能還會繼續修改，也歡迎各位批評指正。有問題或者有其他想法的可以在我的上pr。

作者：緣自世界
連結：