不应犯的7个常见Vue.js错误

我使用了不同的框架，但直到最近才使用Vue.js。我的朋友向我介绍了Vue.js，并鼓励我尝试一下。当我开始使用Vue.js时，我遇到了许多问题，问题，挑战，甚至在此过程中犯了很多错误。因此，我决定与他人分享我的经验，以便其他开发人员不必像我一样经历同样的磨难。

Vue.js 如果您不熟悉Vue.js，那么Vue基本上就是设计用户界面的框架。它与其他框架的不同之处在于，它在设计时考虑了增量适应性。甚至主库都集中在视图层，但可以轻松地与其他库集成。

此外，当您将Vue框架与现代工具和支持库结合使用时，Vue框架足以处理单页应用程序。让我们看一下Vue.js的一些优缺点，以便为您提供更好的主意。

Vue.js的优缺点

优点：

Readability
Documentation
Reactivity
Size
Flexibility

缺点：

Small Community

不幸的是，大多数开发人员无法利用Vue.js的全部潜能，因为他们没有遵循Vue.js的最佳实践并犯了常见的错误。

在本文中，您将了解开发人员在使用vue.js时绝不应该犯的七个vue.js错误。

1.添加模板编译器 很快我就遇到了Vue.js的第一个问题。当我尝试导入它时，我注意到即使您遵循官方指南中提供的说明，组件的内联模板也会返回空白页。当我尝试通过渲染功能或作为单个文件组件定义模板时，这些问题没有发生。由于vue具有许多不同的版本，因此可能由于版本差异而发生这种情况。NPM软件包导出的默认内部版本通常是仅运行时内部版本，其中不包括模板编译器。

如果您熟悉JSX for React，则学习曲线将不存在，因为模板编译器的工作方式与JSX for React相同。它的作用是仅用函数调用替换模板字符串以创建虚拟DOM节点。在单个文件组件中不会发生此问题的主要原因之一是因为SFC使用vue-loader和vueify 工具。这两个工具都通过使用渲染函数定义模板来生成普通的JavaScript组件。要解决此问题，您所要做的就是在导入期间指定正确的内部版本。您还可以通过在捆绑程序配置中为Vue创建别名来解决此问题。

2.Maintaining Property Reactivity React用户将熟悉反应性的概念。它通过调用setState函数来工作。此函数更新属性的值。尽管这是vue.js的最大优点之一，但它在Vue中的工作方式与在React中的方式有所不同。在Vue中，它代理组件属性。获取和设置功能用于覆盖，更新在虚拟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++;

    }

  }

});

在此示例中，您可以清楚地看到Vue实例具有一个称为item 的属性，其中包含一个空对象。初始化组件后，Vue会创建一个代理，该代理具有与item属性链接的get和set函数。因此，框架会跟踪价值波动并做出相应的反应。

3.导出单个文件组件 即使在JavaScript文件中使用Vue没错，也可以使事情变得更复杂。比较简单的方法是使用单文件组件，因为它可以将所有HTML，CSS和JavaScript代码收集在一个文件中。

对于单个文件组件，组件代码通常位于Vue文件内的script标记中。即使代码将用JavaScript编写，您仍然必须导出组件。有几种方法可以做到这一点。其中三个如下：

Direct export
Named export
Default export

如果选择命名的导出选项，则将无法重命名组件。这意味着它也容易摇树。更重要的是，命名导出与单文件组件不兼容。与命名的导出方法相比，使用默认的导出方法更好。

4.避免合并单个文件组件 单个文件组件可以简化开发过程，因为它使开发人员可以在单个文件中添加代码，模板和样式。保持分隔也很重要，否则分隔会很快变得混乱。导入的SFC可能会覆盖先前的SFC，因此在合并SFC时需要格外小心。SFC的最大缺点是您不能将它们导入多个Vue组件中。

5.从子组件更新父数据 在Vue.js中，父母使用道具将数据向下传递给子组件，而子组件则通过事件来响应或发送消息。这种关系也可以称为道具下降和事件上升。这是一个代码片段，显示了如何将props传递给子元素。

<div>
<input v-model="parentMsg">
<br>
<child v-bind:my-message="parentMsg"></child>
 </div>

6.从Vuex行动中展现承诺 由于Vuex中的动作是异步的，因此让调用函数知道动作是否完成的唯一方法。它返回一个承诺，并在以后解决。它进行一个HTTP调用，并稍后一个接一个地解决和拒绝promise。

7.结合使用Vue.js和jQuery 如果要与其他DOM操作工具包（例如jQuery）一起使用Vue框架，则必须将其隔离。您可以使用jQuery来操作DOM小部件，也可以使用Vue，但不能同时使用两者。包装器组件充当Vue，组件和内部DOM元素之间的链接。它允许Vue与组件进行交互，并且这些组件将用于通过jQuery操作内部DOM元素。

原文链接：http://codingdict.com

不应犯的7个常见Vue.js错误

热门标签