Vue虚拟DOM如何高效处理长尾组件渲染问题？

本文共计1340个文字，预计阅读时间需要6分钟。

一、什么是虚拟DOM？虚拟DOM本质上就是一个普通的JS对象，用于描述视图的结构。它通过映射真实DOM的结构，来优化DOM的操作，提高页面的渲染性能。

二、在Vue中，每个组件都有一个render函数在Vue中，每个组件都有一个render函数，用于渲染组件的视图。如果没有提供template，Vue会自动解析el元素的内容，并将其作为组件的模板。

三、没有render找template，没有template找el如果没有提供render函数，Vue会查找组件的template属性。如果template也不存在，Vue会查找el属性，并将el元素的内容作为组件的模板。如果有el，Vue会将el.outHTML作为组件的模板。

一、什么是虚拟dom？

虚拟dom本质上就是一个普通的JS对象，用于描述视图的界面结构

在vue中，每个组件都有一个render函数，

没有render找template，没有template找el，有el就会把el.outHTML作为template，然后把这串字符串编译成render函数。
有template就不往下找了。有render同理。

每个render 函数都会返回一个虚拟dom树，这也就意味着每个组件都对应一棵虚拟DOM树。
也就是说render目的就是创建虚拟dom，这个组件到底要显示啥。
console.log(‘render'); ↓

题外：console.dir()可以显示一个对象所有的属性和方法。

如果没有return，这时候在页面中是不存在真实dom的。