在本文中，我将解释使用DOM作为模板的问题，并提供一些使用Vue.js框架的替代方法。
Vue应用程序通常使用DOM作为模板，因为它是建立最快最简单的体系结构。
然而，这种做法带来了一些问题，这使得它成为任何重大项目的不良选择。例如，您为DOM模板编写的标记并不总是在运行应用程序时获得的。
在本文中，我将解释使用DOM作为模板的问题并提供一些替代方法。
DOM作为模板
该el选项用于将Vue实例挂载到DOM中的元素。如果没有template或render选项存在，Vue将使用安装元素中的任何现有内容作为模板。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<div id="app">
<!--This markup will be the template of the root instance-->
<h1>My Vue.js App</h1>
<p>{{ message }}</p>
</div>
</body>
</html>
new Vue({
el: '#app',
data: {
message: 'Hello world'
}
});
这种方法可以让您快速启动，但是您应该从此过渡，因为：
- 你写的标记并不总是你得到的
- 语法与模板引擎发生冲突
- 与服务器端呈现不兼容
- 运行时模板编译是必需的
标记！= DOM
让我们来区分标记和DOM。标记是你写的HTML。浏览器将解析并将其转换为DOM。
Vue使用DOM作为模板，而不是您编写的标记。为什么这是一个问题？DOM解析器和Vue并不总是同意什么是可接受的标记。非标准的标记可能会改变或从页面中删除，导致不可预知的结果。
例如，你可能有一个自定义的组件my-row，呈现为一个tr和将在逻辑上使用像这样：
<table>
<my-row></my-row>
</table>
由于只tr允许在a内部table，所以my-row在解析文档时，浏览器会提取表格上方的元素。在Vue运行的时候，你会有这样的：
<my-row></my-row>
<table></table>
对于DOM解析器将去掉的Vue模板，也有非常酷的非标准特性：
自闭标签：
如果你的组件不需要插槽，Vue允许你使它成为一个自闭的元素。
<!--Will be discarded by the DOM parser-->
<my-component/>
非串套管组件：
HTML不区分大小写，这意味着你被限制在模板中的烤肉串组件。不过，Vue会高兴地接受camelCase或者PascalCase。
<!--Will be discarded by the DOM parser-->
<PascalCaseComponent camelCaseProp="test"></PascalCaseComponent>
如果使用字符串模板（或渲染函数），则这些问题都不会发生，因为DOM解析器不是那里的一个因素。
与模板引擎冲突
如果您将Vue.js与模板引擎结合使用，那么任何常见的语法都可能会有问题。
例如，Handlebars和Laravel Blade都使用Vue 使用的双花括号语法。在处理模板时，模板引擎将无法区分将导致问题的Vue语法。{{ }}
这通常很容易通过逃避Vue语法来解决，例如在Blade中，你可以把它@放在你的大括号之前，而Blade会知道忽略它们@{{ forVue }}。但是，还有一件事是烦恼你的。
服务器端渲染
如果您想要在服务器端渲染您的Vue应用程序，您完全不能使用DOM模板，因为HTML文档不是SSR过程的输入。
避免DOM模板
你如何构建一个没有DOM模板的Vue.js应用程序，或者至少是一个小的？
1.对组件进行抽象标记
你的根实例可以保存一些状态，但是一般来说，你需要将任何表示逻辑和标记抽象为组件，所以它不在你的DOM模板中。
单文件组件是最好的选择。如果您无法在项目中包含构建步骤，也不想将模板编写为JavaScript字符串（可以），则可以尝试使用x模板。
X-模板
使用x模板，您的模板仍然在页面中定义，但在脚本标记中，因此，将避免由DOM解析器处理。脚本标记在您的组件定义中被标记text/x-template并引用id。
Vue.component('my-component', {
template: '#my-component'
}
<script type="text/x-template" id="my-component">
<div>My component template</div>
<NonStandardMarkupIsFineHere/>
</script>
2.使用渲染功能装载到一个空的节点
当您意识到您仍然需要在DOM模板中声明您的根级组件时，将标记提取到组件中时会碰壁。
<div id="app">
<!-- We still have a DOM template :( -->
<app></app>
</div>
如果你想完全消除你的DOM模板，你可以使用渲染函数装载你的根级组件。
假设你有一个包含声明其他组件的全部组件App。App可以用一个render函数来声明，并且被挂载到一个空的节点上，因为render函数将会替换它们的mount元素。
<div id="app"></div>
new Vue({
el: '#app',
components: {
App
},
render: function(createElement) {
return createElement(App);
}
})
与此同时，您的应用程序是免费的任何DOM模板！
如果您可以从您的应用程序中消除所有字符串和DOM模板，则可以使用较小的仅运行时版本的Vue。这是一个理想的项目体系结构，是您将在vue-cli模板中使用的一个。
概要
- DOM模板是有问题的，因为DOM解析器可能会混淆你的标记。与模板引擎发生冲突以及与服务器端呈现不兼容。
- 要最小化您的DOM模板，请将您的标记抽象为组件。
- 要完全消除您的DOM模板，您需要使用渲染功能安装根级组件。
未经允许不得转载：爱前端网 » 为什么你应该避免Vue.js DOM模板
扫一扫
1257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
