为什么你应该避免Vue.js DOM模板

在本文中,我将解释使用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模板

赞 (5)