本文已参与「新人创作礼」活动， 一起开启掘金创作之路。
虚拟 DOM 树
直接操作真实的 DOM 会引发严重的效率问题，vue 使用虚拟 DOM（vnode）的方式来描述要渲染的内容，vnode 时一个普通的 js 对象，用于描述界面上应该有什么，比如说：
var vnode = {
tag: "h1",
children: {
tag: "undefined",
text: "第一个vue应用，Hello Vue",
},
};
上面就描述了：
有一个标签为 h1 的节点，他有一个子节点，该节点是一个文本，内容为“第一个 vue 应用，Hello world”
vue 模板并不是真实的 DOM，他会被编译为虚拟的 DOM
虚拟 DOM 树最终会生成真实 DOM 树
当数据发生变化时，会引发重新渲染，vue 会比较两棵 vnode，找出差异，并只把差异部分应用到真实的 DOM 树中 vnode tree 是通过 vue 运行 render 函数来返回生成的
render
render是用于编程式地创建组件虚拟 DOM 树的函数。
- 什么是 render 函数？
简单的说，在 vue 中我们使用模板 HTML 语法来组件页面的,使用 render 函数我们可以用 js 语言来构建 DOM，因为 vue 是虚拟 dom,所以在拿到 template 模板时也要转译程 VNode 的函数，而 render 函数构建 DOM，vue 就免去了转译的过程。
当使用 render 函数描述虚拟 DOM 时,Vue 提供了一个函数，这个函数是构建虚拟 DOM 所需要的工具。官网上给他起了个名字加 createElement。还有约定它的简写 h。
- render 函数的参数
render 函数即渲染函数，它是个函数，render 函数的返回值是 Vnode（即：虚拟节点,也就是我们要渲染的节点）
createElement 是第一个参数是必填的,可以是 String Object Fuction
-
String，表示的是 HTML 标签名
-
Object,一个含有数据的组件选项对象
-
Fucntion,返回了一个含有标签名或者组件选项对象的 async 函数
-
代码示例：
render: function (createElement) {
// String
return createElement('h1');
//Object
return createElement({
template: " <div>test 1</div> "
})
// Function
let domFun = function () {
return {
template: " <div> test 1</div> "
}
}
return createElement(domFun())
}
渲染的本质（重新渲染的本质就是再一次调用 render）
var vm = new Vue({
el:"#app",
data:{
firstName:"秦"，
lastName:"嘉"
}
render(h){
//render函数需要传入一个参数
return h("tagname",[
//子节点
h("h1","第一个vue应用：")
h("h1","作者："秦嘉")
]);
}
})
模板必须是单根的
