vue有什么不可替代性,vue缺点和局限性

首页 > 经验 > 作者:YD1662022-11-07 06:23:12

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

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

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

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

vue有什么不可替代性,vue缺点和局限性(1)

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模板中使用的一个。

概要

本文固定链接: http://www.i7758.com/archives/2887.html

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.