知食记
搜索文档…
知食记
思维导图
归档
博客
🎃CSS
CSS基础
CSS3
SCSS
🎉JavaScript
JS 概念
JS陷阱
JS开发知识点
实现JS常见函数
实现JS 常见操作函数
JS Worker
ES6
ES6 函数
Typescript
V8
🕹️框架
Vue
基础知识
长列表性能优化
mixin
渲染函数
组件间通信
vue中的柯里化闭包
vue 渲染过程
Vue采用虚拟DOM的目的是什么
keep-alive
nextTick
vue 数组变异
vue-computed原理
vue-router原理
vue-router权限控制
路由懒加载
Vue diff原理
computed如何与视图绑定
scope css
Runtime Only vs Runtime + Compiler
集中变量管理
Vue3
React
React-Redux
React Hooks
Nuxt
Koa2
🎯算法
算法与数据结构
🎁HTML
DOM
SVG
🏈计算机网络
浏览器
计算机网络
🥊前端生态
Webpack
Babel
Fetch
Axios
Npm
Yarn
业务开发
微前端
Hexo
🏀后端
Node
Java
Python
🕹️面试
面试真经
To-do
🤖开源
开源项目
🧸其他
Linux
Git
正则
设计模式
计算机理论
Group 1
由
GitBook
提供支持
Runtime Only vs Runtime + Compiler
通常我们利用 vue-cli 去初始化我们的 Vue.js 项目的时候会询问我们用 Runtime Only 版本的还是 Runtime + Compiler 版本。下面我们来对比这两个版本。
Runtime Only
我们在使用 Runtime Only 版本的 Vue.js 的时候,通常需要借助如 webpack 的 vue-loader 工具把 .vue 文件编译成 JavaScript,因为是在编译阶段做的,所以它只包含运行时的 Vue.js 代码,因此代码体积也会更轻量。
Runtime + Compiler
我们如果没有对代码做预编译,但又使用了 Vue 的 template 属性并传入一个字符串,则需要在客户端编译模板,如下所示:
1
// 需要编译器的版本
2
new
Vue
({
3
template
:
'<div>{{ hi }}</div>'
4
})
5
6
// 这种情况不需要
7
new
Vue
({
8
render
(
h
)
{
9
return
h
(
'div'
,
this
.
hi
)
10
}
11
})
Copied!
因为在 Vue.js 2.0 中,最终渲染都是通过
render
函数,如果写
template
属性,则需要编译成
render
函数,那么这个编译过程会发生运行时,所以需要带有编译器的版本。
很显然,这个编译过程对性能会有一定损耗,所以通常我们更推荐使用 Runtime-Only 的 Vue.js。
以前
scope css
下一个
集中变量管理
最近更新
2yr ago
复制链接
内容
Runtime Only
Runtime + Compiler