Vue.js开发中的七大陷阱：如何避免？

作者：陈峻编译 来源：51CTO

【51CTO.com快译】不知您是否熟悉、或正在使用着Vue.js。总的说来，Vue是用来设计用户界面的渐进式框架。与其他框架不同，它在设计之初就充分考虑到了增量适应性(incremental adaptability)。Vue的核心库都主要集中并关注视图层。它不仅容易上手，还便于与第三方的库、以及既有项目相集成。同时，Vue生态系统所支持的库在与单文件组件(SFC)等工具结合使用时，Vue也能够为复杂的单页应用提供相应的驱动与功能。

Vue.js的优缺点

优点：

• 代码具有一定的可读性
• 提供丰富的文献与支持资料
• 具有适应性和反应性
• 框架本身体积不大
• 具体较强的灵活性

缺点：

• 社区规模较小

虽然优势大于劣势，但是由于大多数开发人员未能遵循Vue.js的优秀实践(请参见-- https://levelup.gitconnected.com/best-practices-for-vue-js-b46760fe0096)，因此他们不仅无法充分利用Vue.js的全部潜能，而且可能时常犯错。

就个人而言，我已经使用Vue.js一段时间了，除了收获愉快的体验与经验，也曾犯过一些错误。为了避免大家跌入同样的“坑”中，我在此将其中常见的七大错误总结如下：

1.添加模板编译器

在尝试导入Vue.js时，我发现：即使自己遵循了官方指南的说明事项，组件的内联(inline)模板也会返回空白页面。对此，当我试着使用那些渲染函数(render function)、或作为单文件组件定义的模板时，此类问题就没有再现了。由于Vue具有许多个不同的版本，因此我估计这是由版本差异所导致的。毕竟，NPM软件包所导出的默认构建版本，通常是仅用于构建运行时(runtime)，并不包括模板的编译器。

如果您熟悉JSX for React，那么就不难理解模板编译器了。它的作用是通过函数调用的方式，仅替换那些模板字符串，进而创建一个虚拟的DOM节点。该问题未在单文件组件中发生的主要原因是：单文件组件使用了vue-loader和vueify工具。这两个工具都能够通过使用渲染函数所定义的模板，来生成简单的JavaScript组件。因此，要避免该问题，您需要在导入期间指定正确的构建版本。当然，您也可以通过在捆绑程序的配置中，为Vue创建别名(alias)，来解决此类问题。

2.维持属性的反应性

React用户一定对反应性的概念并不陌生。它是通过调用setState函数来工作的。此函数能够更新各种属性值。尽管反应性也是Vue.js的一大优点，但它在Vue中的工作方式与在React中有所不同。在Vue中，它代理的是各种组件的属性。用于覆盖和更新的Get和Set函数，在虚拟的DOM中被传递。

var vm = new Vue({

el: '#vm',

template: `<div>{{ item.count }}<input type="button" value="Click" @click="updateCount"/></div>`,

data: {

item: {}

},

beforeMount () {

this.$data.item.count = 0;

},

methods: {

updateCount () {

// JavaScript object is updated but

// the component template is not rendered again

this.$data.item.count++;

}

}

});

在上述Java代码示例中，您可以清楚地看到Vue实例具有一个名为item的属性，其中包含着一个空对象。在组件被初始化后，Vue会创建一个代理，该代理具有与item属性相连接的get和set函数。据此，该框架会跟踪各个值的变化，并做出相应的反应。

3.导出单文件组件

为了简化JavaScript文件的复杂性，Vue使用了简单的处置方法--单文件组件，它能够将所有HTML、CSS和JavaScript代码收集到同一个文件中。不过，由于单文件组件的代码通常驻留在Vue文件内部的script标记中，因此即使代码是由JavaScript编写的，您仍然需要导出对应的组件。当然，您可以使用如下三种方法来实现：

• 直接导出
• 命名导出
• 默认导出

如果选择命名的导出方式，那么我们将无法对各个组件进行重命名。而且更重要的是，命名导出与单文件组件并不兼容。因此，如果您是一名新手用户，我建议您使用默认的导出方法会更好。

4.避免合并单文件组件

由于单文件组件可以使开发人员在同一个文件中添加各种代码、模板和样式，因此它简化了开发的整个过程。不过，为了避免产生混乱，我们应按需分隔不同的单文件组件。新导入的单文件组件很可能会覆盖过往的单文件组件，因此我们在合并它们的时候要倍加小心。此外，单文件组件最大的一个缺点是：我们不能将它们整体导入到多个Vue组件之中。

5. 父数据更新子组件

在Vue.js中，父组件会使用props或发送事件消息，将数据向下传递给子组件。而子组件也会做出响应。这种关系往往被称为props down和event up。如下代码片段展示了父数据如何通过props传递给子元素：

<div>

<input v-model="parentMsg">

<br>

<child v-bind:my-message="parentMsg"></child>

</div>

6.根据Vuex行为产生promise

由于在Vuex中，各项行为都是异步的，因此为了让调用函数知道某个行为是否已完成，唯一的方法是返回一个promise(承诺)，留在后期予以解决。据此，Vue会产生一个HTTP调用，并且在promise之后逐个处理各种“解决”或“拒绝”。

7.结合使用Vue.js和jQuery

如果需要与其他的DOM操作工具集(例如jQuery)一起使用Vue框架，您需要注意它们之间的相互隔离。也就是说，您既可以使用jQuery来操作DOM widget，也可以使用Vue，但是请不要同时使用这两者。通常，包装器(wrapper)组件会充当Vue、对应的组件、以及其他内部DOM元素之间的链接，以实现彼此的交互。而且这些组件将会用于通过jQuery来操控各个内部DOM元素。

最后，希望您在使用Vue.js框架设计应用程序，开发解决方案，或创建Web应用时，能够避免触犯上述七种Vue.js的常见错误。

原文标题：7 Common Vue.js Mistakes You Should Never Make，作者：Irfan Ahmed

【51CTO译稿，合作站点转载请注明原文译者和出处为51CTO.com】