什么是 DSL
DSL专业称呼叫做领域特定语言。对于我们前端来说，像我们平时写的 json, html, css, js, jsx 等等，这种便于我们描述场景并且也能被计算机所识别的语言叫做 DSL。
那么什么是 Vue DSL?
从上面的 DSL 介绍来看，我们平时写的 html, js, css 都属于 DSL 的一种。按照传统的页面写法里面，一个页面有 css, js, html，Vue 一开始为了能让 web 开发者上手顺利，也采用了类似的形式，在 .vue 文件中写 template, script 和 style 。
例如:
<style>
div {
font-size: 14px;
}
</style>
<body>
<div>Hello World</div>
<script></script>
</body>
// 这是 vue 的
<template>
<div>Hello World</div>
</template>
<script>
div {
font-size: 14px;
}
</script>
<style></style>
从上面两个代码片段可以看出在 vue 中，template 就是对应描述 html 内容的, script 对应的是传统 html 文件中的 js 代码，style 对应的是传统 html 文件中的 css 样式。
在 vue 中是如何把 DSL 转变成传统模式的 html 格式的
如果你是使用 @vue/cli 来创建项目的话，应该在构建命令中有一个选项，选择 runtime only 和 runtime + compiler。
runtime only
runtime only 模式他只能允许在 .vue 文件中去使用 template，如果在其他地方使用 vue 是不会认的。在编译的时候，$mount(template) => render => vnode => UI
runtime + compiler
runtime + compiler 可以在任意地方使用 template，并且在编译的时候跟 runtime only 模式有一点区别， template => ast => render => vnode => UI。
Vue编译参考文献：【面试题解析✨】Vue 的数据是如何渲染到页面的？
387
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
