vue渲染流程知识点

最新推荐文章于 2024-07-04 10:01:18 发布

Liuqh233

最新推荐文章于 2024-07-04 10:01:18 发布

阅读量323

点赞数

分类专栏：二、Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_41840644/article/details/103111112

版权

本文总结了Vue的知识点，包括模板配置、渲染流程及其优先级。在模板配置中，对比了在页面直接书写、template中书写和render函数生成虚拟DOM的区别。Vue渲染流程涉及将template转换为AST，再通过render生成虚拟DOM并挂载到真实DOM上。此外，讨论了数据响应式原理（使用Object.defineProperty()监听数据变化）、method中this的指向（指向vue实例）以及render和template的区别（render具有更高优先级）。

摘要由CSDN通过智能技术生成

vue知识点总结

模板的配置(template)

在页面中直接书写 (outerHTML)
在template模板中书写
在render函数手动生成,render函数的createElement参数是创建虚拟dom的一个方法

vue渲染流程

当vue中有el指定的渲染元素时,会首先寻找template模板,当有template模板时,会将模板中的字符串经过处理生成AST抽象语法树,然后经过render函数生成虚拟dom,然后创建vm.$el代替起始时的el指定的元素,将生成的真实dom挂载到指定元素上

  el ? Yes ==> template ? yes => 生成AST => render函数 => VNode => vm.$el(真实dom) => 替换el
                          no ==> vm.$el.outerHTML("<div id="app"</div>") =>生成AST => render函数 => VNode => vm.$el(真实dom) => 替换el
       No  ==> $mount   ? yse => 生成AST => render函数 => VNode => vm.$el => 替换el