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

    1、Runtime-Compiler和Runtime-only的main.js文件的区别:

    //(1) Runtime-Compiler
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
    
    // (2)Runtime-only
    new Vue({
      el: '#app',
      router,
      render: h => h(App)
    })
    
    // Runtime-Complier 解析过程:
    第一步:将template模板转换成抽象语法树(ast);
    第二步:通过render函数将抽象语法树转换成虚拟DOM(vdom);
    第三步:将虚拟DOM转换成真正的DOM;
    template => 抽象语法树(ast) => render() => 虚拟DOM(vdom) => 页面
    
    // Runtime-only 解析过程:
    第一步:vue-template-compiler插件直接将组件转换成 render函数;
    第二步:将render函数返回的虚拟DOM转换成页面;
    render() => 虚拟DOM(vdom) => 页面;
    

    2、render函数:

    var render = function() {
      var _vm = this
      var _h = _vm.$createElement
      var _c = _vm._self._c || _h
      return _c(
        "div",
        { attrs: { id: "app" } },
        [
          _c("img", { attrs: { src: require("./assets/logo.png") } }),
          _vm._v(" "),
          _c("router-view")
        ],
        1
      )
    }
    // render函数返回的是虚拟DOM
    

    3、两者对比:

    (1)Runtime-only性能更高;
    (2)Runtime-only代码量更少;


     

  • 相关阅读:
    WEB功能测试说明
    年轻的采访可以学到很多东西
    金融系列11《电子现金应用》
    vs2010调用matlab2011下的.m文件
    使用VS2010调用matlab的mat格式文件
    matlab mex入门简介
    MEX文件编写和调试
    MAT文件操作
    8.Redis 数据备份与恢复
    JAVA_OPTS设置
  • 原文地址:https://www.cnblogs.com/wjlbk/p/12633293.html
Copyright © 2011-2022 走看看