七种需要避免的Vue.js常见错误

【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: `
{{ item.count }}"button" value="Click" @click="updateCount"/>
`, 
  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传递给子元素： 

 
"parentMsg"> 

 
"parentMsg">