vue38 —— runtime+compiler & runtime-only

最新推荐文章于 2024-06-26 15:48:28 发布

8笔

最新推荐文章于 2024-06-26 15:48:28 发布

阅读量259

点赞数

分类专栏： vuejs

本文链接：https://blog.youkuaiyun.com/weixin_43899694/article/details/103230711

版权

vuejs 专栏收录该内容

57 篇文章

订阅专栏

本文探讨了Vue程序的运行过程，重点比较了使用runtime compiler和runtime-only模式的区别。在runtime compiler中，template经过编译生成render函数，然后转化为虚拟DOM并更新UI。而runtime-only模式下，.vue文件的template预先由vue-template-compiler处理，直接生成render函数，具有更高的性能和更小的代码体积。

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

vue程序运行过程：

template —^解析–> ast –^编译–>render函数 --^virtual tree^–> UI

在`vue init webpack myproject` 之后，有Vue build 选项： runtime compiler 和 runtime-only

两种选择生成的项目区别，只在main.js中

runtime compiler - main.js：

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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

template > ast > render > vdom > ui

runtime-only - main.js：

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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
})

.vue文件中的template是由 vue-template-compiler 处理
render > vdom > ui

runtime-only 的性能更高，代码量更少

render函数

...
render: h => h(App)
// 实际上
render: function(createElement){
// 1. createElement('标签',{标签的属性},[])  
// 是一个函数，接受三个参数：
// 第一个参数，是标签名，会生成对应标签，替代vue实例挂载的dom
// 第二个参数，对象，存放标签的属性 eg. {class: box}，可不写
// 第三个参数，数组，存放内容 ['hello world']
// 1. 普通用法
	return createElement('h2',{id: box},['hello, render']) --常规使用
	return createElement('h2',
		{id: box},
		['hello, render',createElement('button',['按钮']])
// 2. 传入一个组件
	return createElement(cpn)
}