|
|
|
|
公众号矩阵

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

本文和您讨论开发人员在使用vue.js时常见的七种vue.js错误。

作者:陈峻编译来源:51CTO|2020-10-29 09:00

七种需要避免的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中被传递。

  1. var vm = new Vue({ 
  2.   el: '#vm'
  3.   template: `<div>{{ item.count }}<input type="button" value="Click" @click="updateCount"/></div>`, 
  4.   data: { 
  5.     item: {} 
  6.   }, 
  7.   beforeMount () { 
  8.     this.$data.item.count = 0;   
  9.   }, 
  10.   methods: { 
  11.     updateCount () { 
  12.       // JavaScript object is updated but 
  13.       // the component template is not rendered again 
  14.       this.$data.item.count++; 
  15.     } 
  16.   }  
  17. });  

在上述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传递给子元素:

  1. <div> 
  2. <input v-model="parentMsg"
  3. <br> 
  4. <child v-bind:my-message="parentMsg"></child> 
  5. </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】

【责任编辑:庞桂玉 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

云原生架构实践

云原生架构实践

新技术引领移动互联网进入急速赛道
共3章 | KaliArch

26人订阅学习

数据中心和VPDN网络建设案例

数据中心和VPDN网络建设案例

漫画+案例
共20章 | 捷哥CCIE

189人订阅学习

搭建数据中心实验Lab

搭建数据中心实验Lab

实验平台Datacenter
共5章 | ITGO(老曾)

118人订阅学习

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微