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

在本文中，我将解释使用DOM作为模板的问题，并提供一些使用Vue.js框架的替代方法。

Vue应用程序通常使用DOM作为模板，因为它是建立最快最简单的体系结构。

然而，这种做法带来了一些问题，这使得它成为任何重大项目的不良选择。例如，您为DOM模板编写的标记并不总是在运行应用程序时获得的。

在本文中，我将解释使用DOM作为模板的问题并提供一些替代方法。

为什么你应该避免Vue.js 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允许你使它成为一个自闭的元素。

<my-component/>

非串套管组件：

HTML不区分大小写，这意味着你被限制在模板中的烤肉串组件。不过，Vue会高兴地接受camelCase或者PascalCase。

<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">

<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模板，您需要使用渲染功能安装根级组件。

本文固定链接:

http://www.i7758.com/archives/2887.html