zoukankan      html  css  js  c++  java
  • Runtime-Compiler和Runtime-Only的区别

    我们使用脚手架vuecli初始化一个项目时,会让你选择是使用runtime-compiler和runtime-only.

    这两者的我们发现他创建的main.js不一样。

    一.runtime-compiler

    • vue运行过程

      • template --> ast --> render --> vDom --> UI

        • ast:抽象语法树

        • vDom:虚拟Dom

      template最终还是会被渲染为render函数,编译过程中对性能有一定的损耗

    二.runtime-only

    • vue运行过程

      • render --> vDom --> UI

    • 我们在使用 runtime-only 的时候,需要借助 webpack的loader工具,将 .vue 文件编译为JavaScript,因为是在编译阶段做的,所以它只包含运行时的 Vue.js 代码,所以代码体积会更轻量。

    • 在将 .vue 文件编译为 JavaScript文件的过程中会将组件中的 template 模版编译为 render 函数,所以我们得到的是 render 函数的版本。所以运行的时候是不带编译的,编译是在离线的时候做的

    • template 会通过 vue-template-compiler 转换为 render 函数

    三.vue文件封装

    • 一个组件以一个js对象的形式进行组织和使用的时候非常不方便

      • 一方面编写template的时候非常的麻烦
      • 另一方面如果有样式,不知写在哪里合适
    • 所以出现的一种全新的方式来组织一个vue的组件,但是这种方式的文件不能被正确的加载

      • 这种特殊的文件和特殊的格式,是需要有人来帮助我们
      • vue-loader和vue-template-copmpiler
    • 安装vue-loader和vue-template-copmpiler

      npm isntall vue-loader vue-template-copmpiler --save-dev
      

      然后修改webpack.config.js的配置文件

    结论

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

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

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

  • 相关阅读:
    Python数据分析与爬虫
    Python例题集
    Python知识点复习
    Python内置函数---ord()
    关于Xpath
    初学爬虫(3)
    python操作csv文件
    初学爬虫(二)
    网络爬虫引发的问题及robots协议
    初学爬虫(一)
  • 原文地址:https://www.cnblogs.com/Bc01/p/14325208.html
Copyright © 2011-2022 走看看