• Runtime-Compiler和Runtime-Only的区别


    组件渲染过程

    template --> ast --> render --> 虚拟Dom--> 真实的Dom --> 页面

    runtime-only

    • 我们在使用 runtime-only 的时候,需要借助 webpack的loader工具,将 .vue 文件编译为JavaScript,因为是在编译阶段做的,所以它只包含运行时的 Vue.js 代码,所以代码体积会更轻量。
    • 在将 .vue 文件编译为 JavaScript文件的过程中会将组件中的 template 模版编译为 render 函数,所以我们得到的是 render 函数的版本。所以运行的时候是不带编译的,编译是在离线的时候做的
    • template 会通过 vue-template-compiler 转换为 render 函数

    渲染过程:render函数  ---> 虚拟dom  --->真实dom 

     

    runtime-compiler

    • 因为在Vue中,最终渲染都是通过 render函数,如果写 template 属性,则会编译为 render 函数,那么这个编译过程会发生在运行时,所以需要带有编译器的版本
    • 编译过程会对性能有一定的损耗

    渲染过程:template --解析--> 成抽象语法树(ast)--编译成--> render函数  --->虚拟dom树 ---->真实dom

    结论:

    runtime-only: 将template在打包的时候,就已经编译为 render函数

    runtime-compiler: 在运行的时候,才去编译 template

    结果: 发布生产的时候,runtime-only 构建的项目代码体积更小,运行速度更快

  • 相关阅读:
    2014年10月20----数组1
    类型--2014年10月19日
    2014年10月17----类别
    2014年10月16号--for语句实例
    2014年10月12日——运算符
    java练习题:解一元二次方程、判断闰年、判断标准身材、三个数取最大值
    Java安装与环境配置
    SQL语言增加、修改、删除数据的语法
    StringBuffer的用法(转)
    JSTL标签库简介
  • 原文地址:https://www.cnblogs.com/ltog/p/14326701.html
Copyright © 2020-2023  润新知