# 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 组件为什么需要一个根元素？


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://mm.ricky.moe/framework/vue-1/vue-xuan-ran-guo-cheng.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.