runtime compiler 和 runtime-only的区别

最新推荐文章于 2024-10-09 09:20:36 发布

原创最新推荐文章于 2024-10-09 09:20:36 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

框架类专栏收录该内容

10 篇文章

订阅专栏

本文深入探讨Vue.js的渲染过程，解释了如何从模板转换为Render函数，以及运行时-only选项如何减小包体积。通过示例展示了render函数的使用，并阐述了其在构建高性能应用中的作用。同时，分析了模板编译的过程，涉及vue-template-compiler的作用。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  template: '<App/>',
  components: { App },
}).$mount('#app')
//compiler -相当于执行tempiler -> 使用parse(解析)成ast(抽象语法树) -> 编译成render函数 -> 
//把相关的template组成虚拟virtualdom -> 真是dom


new Vue({
  router,
  store,
  render: h(App)
}).$mount('#app')
//only -直接把app相关转成render函数 -> 虚拟virtualdom -> 真是dom
//这就是在创建vue项目的时候使用runtime-only会小6kb原因，就是少了前俩步template -> ast -> render


//render函数的原理
const aa = {
  template: '<div>{{ massge }}</div>',
  date () {
    return {
      massge: '我是组件'
    }
  }
}

new Vue({
  el: '#app',
  render: function (createlement) {
    //基本语法：1
    return createlement('h2', { class: 'box' }, ['hellow world'])
    //基本语法：2
    return createlement(
      'h2',
      { class: 'box' },
      createlement(
        'button',//标签
        {options},//属性 可不写
        ['xxxxx']//内容
      )
    )
    //还可以传入一个组件
    return createlement(aa)//直接把组件传进来，就省去了template，
    //使用render这种方式会把编译的时候把引入的xx.vue里面的template直接进行转换
    //用到的工具就是vue-tenplate-compiler 可以在package-json查看，打印这个app可以看到是一个object对象
  }
})