? ? 虚拟dom是对真实dom的抽象,本质是JS对象
? ? 在生成真实DOM之前,vue会把模板编译为一个虚拟dom,当里面某个DOM节点发生变动时,通过diff算法对比新旧虚拟DOM,发现不一样的地方直接修改在真实的DOM上
? ? ? ? 可以减少DOM操作
? ? ? ? 可以跨平台渲染
? ? ? ? 严重依赖打包工具
? ? ? ? 节点规模过大时,虚拟DOM的稳定性不如原生DOM
? ? 1、获取到template
? ? 2、template 转 AST树
? ? ? ? AST树:
? ? ? ? ? ? 抽象语法树(一个对象的格式)
? ? ? ? ? ? 源代码的抽象语法结构的树状描述
? ? ? ? ? ? 用于将vue的指令、语法等 转为 源代码的抽象语法结构
? ? 3、AST树 转 render函数
? ? ? ? render函数:
? ? ? ? ? ? 返回包含_c、_v、_s函数的字符串
? ? 4、执行render函数 转 虚拟DOM
? ? 5、执行patch方法,通过diff算法对比新旧虚拟DOM,打补丁,生成真实DOM