熟悉vue或者研究过vue源码的同学都知道，组件是vue最重要的部分之一，而写组件由两种常见的方式：
- template模板
- render渲染函数式的
template式的组件
template式的组件有两种常见的形式：
第一种：
<template>
<div class="hello">
{{ msg }}
</div>
</template>
<script>
Vue.component('hello', {
data() {
return {
msg: 'hello world.'
}
}
})
</script>
第二种：
Vue.component('hello', {
data() {
return {
msg: 'hello world.'
}
},
template: `<div class="hello"> {{ msg }} </div>`
})
在项目开发中，第一种比较常见。
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的。GitHub地址
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支持服务端的渲染。
后续可能还会继续修改，也欢迎各位批评指正。有问题或者有其他想法的可以在我的GitHub上pr。
