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

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

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

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

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

DOM作为模板

该el选项用于将Vue实例挂载到DOM中的元素。如果没有template或render选项存在,Vue将使用安装元素中的任何现有内容作为模板。

title

My Vue.js App

{{ message }}

new Vue({

el: '#app',

data: {

message: 'Hello world'

}

});

这种方法可以让您快速启动,但是您应该从此过渡,因为:

你写的标记并不总是你得到的

语法与模板引擎发生冲突

与服务器端呈现不兼容

运行时模板编译是必需的

标记!= DOM

让我们来区分标记和DOM。标记是你写的HTML。浏览器将解析并将其转换为DOM。

Vue使用DOM作为模板,而不是您编写的标记。为什么这是一个问题?DOM解析器和Vue并不总是同意什么是可接受的标记。非标准的标记可能会改变或从页面中删除,导致不可预知的结果。

例如,你可能有一个自定义的组件my-row,呈现为一个tr和将在逻辑上使用像这样:

由于只tr允许在a内部table,所以my-row在解析文档时,浏览器会提取表格上方的元素。在Vue运行的时候,你会有这样的:

对于DOM解析器将去掉的Vue模板,也有非常酷的非标准特性:

自闭标签:

如果你的组件不需要插槽,Vue允许你使它成为一个自闭的元素。

非串套管组件:

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

如果使用字符串模板(或渲染函数),则这些问题都不会发生,因为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'

}

My component template

2.使用渲染功能装载到一个空的节点

当您意识到您仍然需要在DOM模板中声明您的根级组件时,将标记提取到组件中时会碰壁。

如果你想完全消除你的DOM模板,你可以使用渲染函数装载你的根级组件。

假设你有一个包含声明其他组件的全部组件App。App可以用一个render函数来声明,并且被挂载到一个空的节点上,因为render函数将会替换它们的mount元素。

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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171214A03XGW00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券