vue中在哪个生命周期中dom被渲染_vue入门：（底层渲染实现render函数、实例生命周期）...

vue实例渲染的底层实现

vue实例生命周期

一、vue实例渲染的底层实现

1.1实例挂载

在vue中实例挂载有两种方法：第一种在实例化vue时以el属性实现，第二种是通过vue.$mount()方法实现挂载。不管是哪种挂载都不影响vue实例化组件的执行流程和模式，只是通过vue.$mount()方法实现挂载可以更灵活的实现组件复用和挂载。

1 var vm = newVue({2 el:'挂载元素id',//实例化el属性实现挂载

3 ...4 })5 var vm1 = newVue({...});6 vm1.mount('挂载元素id')；//vue.mount()方法实现挂载

7 //参数模型：# + id

1.2构建DOM抽象语法树与template

在vue实例化中有一个非常关键的操作就是构建DOM抽象语法树，基于抽象语法树生成虚拟节点，然后再将数据渲染到虚拟节点上，再将完成数据渲染的节点添加到document中刷新页面，呈现页面效果。构建抽象语法树有三种方式：1.基于绑定的实例化属性el和$mount()方法构建；2.基于实例化属性template添加的模板构建；3.基于ready()的参数构建。

这三种构建方式的优先级：render() > template > el

本质上的el与template与render()函数的参数都是一个原理，通过el就是将el指向的元素的DOM模型的outerHTML属性值拿到，outerHTML属性值与template的形式完全一样就是html文本的字符串形式；然后将这个字符串形式的html文本转换成js对象模型，render()函数中使用的就直接是js对象模型，接着通过js对象模型所表达的html结构转换成AST(抽象语法树)用于构建虚拟节点VNode；render()函数再在这个虚拟节点上渲染数据，完成数据渲染后就添加到html文档中渲染到页面。

通过元素在window上的id指向获取到id匹配的元素节点对象的outerHTML属性值：

1 我是一个div