Vue2面试题:说一下虚拟DOM的原理?

    虚拟dom是对真实dom的抽象,本质是JS对象

    在生成真实DOM之前,vue会把模板编译为一个虚拟dom,当里面某个DOM节点发生变动时,通过diff算法对比新旧虚拟DOM,发现不一样的地方直接修改在真实的DOM上

    优点: 

        可以减少DOM操作

        可以跨平台渲染

    缺点:

        严重依赖打包工具

        节点规模过大时,虚拟DOM的稳定性不如原生DOM

vue的模板编译过程:

    1、获取到template

    2、template 转 AST树

        AST树:

            抽象语法树(一个对象的格式)

            源代码的抽象语法结构的树状描述

            用于将vue的指令、语法等 转为 源代码的抽象语法结构

    3、AST树 转 render函数

        render函数:

            返回包含_c、_v、_s函数的字符串

    4、执行render函数 转 虚拟DOM

    5、执行patch方法,通过diff算法对比新旧虚拟DOM,打补丁,生成真实DOM

你可能感兴趣的:(vue.js,javascript,前端)