Vue.js模块渲染的简单过程-会把模板转换成渲染函数-招锁优妙

Vue.js模块渲染的简单过程

Vue.js模块渲染，其实就是一个把开发者写的模板转变成我们看得见的页面的过程。它主要包括以下几个步骤：

一、模板解析

Vue首先会把我们的模板转换成一个渲染函数。这个渲染函数就像是一个魔法师，可以把模板变成一个虚拟DOM树，这个树是我们看不见但Vue能理解的东西。

• 模板编译：Vue会把模板转换成渲染函数，这个过程分为解析（把模板字符串转换成AST），优化（标记静态节点，减少更新工作量），生成（把AST转换成渲染函数）三个阶段。

二、创建虚拟DOM

解析完模板后，Vue会用生成的渲染函数创建一个虚拟DOM树。虚拟DOM就像一个玩具树，和真实的DOM长得一样，但是更轻巧，方便Vue操作。

• 虚拟DOM结构：它通常是一个JavaScript对象，包含标签名、属性、子节点等信息。
• 创建VNode：渲染函数执行时，会创建VNode对象，VNode就是虚拟DOM节点的意思。

三、diff算法对比

每次数据变化时，Vue都会重新生成一个虚拟DOM树。然后，Vue会用一个叫diff算法的东西，去比较新旧虚拟DOM树，找出不一样的地方。

四、更新真实DOM

找到不一样的地方后，Vue就会更新真实的DOM，让页面显示出来和虚拟DOM一样的内容。

Vue会用一些巧妙的技巧，比如批量更新、合并操作，来保证这个更新过程尽可能快，从而提升应用的性能。

Vue.js的渲染过程就是通过这样一些步骤，从我们定义的模板变成我们看到的页面的。它利用了虚拟DOM和diff算法来保证渲染的效率，使得Vue应用可以快速响应用户的操作。