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