【vue-cli安装】runtime-compiler&runtime-only

最新推荐文章于 2024-05-21 18:31:57 发布

super_chrisss

最新推荐文章于 2024-05-21 18:31:57 发布

阅读量619

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_43228826/article/details/122818383

版权

vue 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Vue CLI在构建项目时如何选择使用runtime-compiler和runtime-only。runtime-compiler模式下，template会被编译成render函数，适合在.vue文件外使用template。而runtime-only模式则跳过编译过程，直接使用预编译后的render函数，提高性能，适用于只使用.vue文件的项目。总结来说，若需在外部使用template，则选择runtime-compiler；否则，runtime-only是更快、更轻量的选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-cli构建项目，可选择使用 runtime-compiler 或 runtime-only
分别创建出两个项目，其唯一的区别在main.js中，vue实例是否使用template

1.runtime-compiler

原理：template -- ast -- render -- Virtual Dom -- UI
1）内部将vue中的template模板解析成abstract syntax tree （ast）抽象语法树

2）抽象语法树再编译成render函数

3）render函数内存中渲染形成虚拟dom树，
4）virtual dom渲染为浏览器UI

2.runtime-only

原理：render -- Virtual Dom -- UI

跳过1）2）直接通过render函数渲染成一个虚拟dom树并渲染为UI

优点：更快，更轻量（轻了6kb左右）

说明： runtime-only 模式下，将template放在.vue 文件中，由开发时依赖vue-template-compiler在开发时已将.vue文件中的 template 解析成了 render 函数，所以最后生产出来运行的代码没有template（runtime-only 只能识别render函数，不识别template）

总结：开发中，需在.vue文件之外使用template，选择runtimecompiler；如果仅在.vue文件夹开发，可选择更快更轻量的runtimeonly

附：render函数

render函数中的参数h简写来源于hyper-script指生成HTML结构的script脚本，实际指createElement
render( createElement ){
   return createElement( 'xxx' )
}
1.普通用法
createElement( '标签名'，'标签属性'，'标签内容或子标签')
eg：
	createElement( 'h2', { id : 'hh' }, [ '我是h2元素' ])
 此方法会返回当前创建的对象，所以可以连续创建
 createElement(  'h2', 
	 			    {class:'hh'},
	                ['我是元素内容'， 
	                   createElement('span',
	                                  {id:ss},
	                                   ['我是span元素内容']
	                                 )
	                ]
               )
2.定义组件-组件替换
const cpn = {
  template:'<div>{{message}}</div>,
  data(){
   return {
      message:'xxx'
  }
}
}
new Vue( {
el:'#app',
render:function(createElement){
  return. createElement(cpn)
}
}
)