# vue 渲染过程

![](https://3490195898-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnQxDcxCKODvYvTUWe3%2F-LyHV63RVY-IEVXQBE0L%2F-LyH_aDLc5sft5Y3ZtDp%2Fimage.png?alt=media\&token=971e7b7e-08cb-4a27-9bc4-d6a62a87bc47)

![](https://3490195898-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnQxDcxCKODvYvTUWe3%2F-LyHV63RVY-IEVXQBE0L%2F-LyHavnSmJRRHw7Mh2KL%2Fimage.png?alt=media\&token=9c2ece40-fd55-4f61-b882-352b746a4e23)

1. new Vue，执行初始化，将传入的data数据绑定到当前实例，就可以通过this.message的形式访问传入的数据。这个过程是执行initData()函数完成的。
2. 挂载$mount方法，通过自定义Render方法、template、el等生成Render函数。如果传入了模版(template)就将模版里面的内容编译成render函数，否则将传入的el对应的元素的内容编译成render函数。编译是调用compileToFunctions函数完成的。也可以自己手写render函数，可以减少编译这一环节。其中render渲染函数的优先级最高，template次之且需编译成渲染函数，而挂载点el属性对应的元素若存在，则在前两者均不存在时，其outerHTML才会用于编译与渲染。
3. 生成render函数后，调用\_createElement函数生成vnode。
4. 将虚拟DOM映射为真实DOM页面上。

非常有用的参考：

> <https://juejin.im/post/5ce263bf518825645c34cd4e>

### Vue 组件为什么需要一个根元素？