对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站。但如果你想更加高效地使用Vue来开发,成为Vue.js大师,那下面我要传授的这五招你一定得认真学习一下了。

第一招:化繁为简的Watchers

场景还原:

created(){    this.fetchPostList()
},
watch: {
   searchInputValue(){        this.fetchPostList()
   }
}

组件创建的时候我们获取一次列表,同时监听input框,每当发生变化的时候重新获取一次筛选后的列表这个场景很常见,有没有办法优化一下呢?

招式解析:
首先,在watchers中,可以直接使用函数的字面量名称;其次,声明immediate:true表示创建组件时立马执行一次。

watch: {    searchInputValue:{        handler: 'fetchPostList',        immediate: true
   }}

第二招:一劳永逸的组件注册

场景还原:

import BaseButton from './baseButton'import BaseIcon from './baseIcon'import BaseInput from './baseInput'export default {
 components: {
   BaseButton,
   BaseIcon,
   BaseInput
 }
}
<BaseInput
 v-model="searchText"
 @keydown.enter="search"/><BaseButton @click="search">
 <BaseIcon name="search"/></BaseButton>

我们写了一堆基础UI组件,然后每次我们需要使用这些组件的时候,都得先import,然后声明components,很繁琐!秉持能偷懒就偷懒的原则,我们要想办法优化!

招式解析:
我们需要借助一下神器webpack,使用 require.context() 方法来创建自己的(模块)上下文,从而实现自动动态require组件。这个方法需要3个参数:要搜索的文件夹目录,是否还应该搜索它的子目录,以及一个匹配文件的正则表达式。

我们在components文件夹添加一个叫global.js的文件,在这个文件里借助webpack动态将需要的基础组件统统打包进来。

import Vue from 'vue'function capitalizeFirstLetter(string) {  return string.charAt(0).toUpperCase() + string.slice(1)
}const requireComponent = require.context(  '.', false, /\.vue$/
  //找到components文件夹下以.vue命名的文件) requireComponent.keys().forEach(fileName => {  const componentConfig = requireComponent(fileName)  const componentName = capitalizeFirstLetter(
   fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')    //因为得到的filename格式是: './baseButton.vue', 所以这里我们去掉头和尾,只保留真正的文件名
 )  Vue.component(componentName, componentConfig.default || componentConfig)
})

最后我们在main.js中import 'components/global.js',然后我们就可以随时随地使用这些基础组件,无需手动引入了。

第三招:釜底抽薪的router key

场景还原:
下面这个场景真的是伤透了很多程序员的心...先默认大家用的是Vue-router来实现路由的控制。
假设我们在写一个博客网站,需求是从/post-page/a,跳转到/post-page/b。然后我们惊人的发现,页面跳转后数据竟然没更新?!原因是vue-router"智能地"发现这是同一个组件,然后它就决定要复用这个组件,所以你在created函数里写的方法压根就没执行。通常的解决方案是监听$route的变化来初始化数据,如下:

data() {  return {
   loading: false,
   error: null,
   post: null
 }
},
watch: {  '$route': {
   handler: 'resetData',
   immediate: true
 }
},
methods: {
 resetData() {    this.loading = false
   this.error = null
   this.post = null
   this.getPost(this.$route.params.id)
 },
 getPost(id){  }
}

bug是解决了,可每次这么写也太不优雅了吧?秉持着能偷懒则偷懒的原则,我们希望代码这样写:

data() {  return {
   loading: false,
   error: null,
   post: null
 }
},
created () {  this.getPost(this.$route.params.id)
},
methods () {
 getPost(postId) {    // ...
 }
}

招式解析:

那要怎么样才能实现这样的效果呢,答案是给router-view添加一个unique的key,这样即使是公用组件,只要url变化了,就一定会重新创建这个组件。(虽然损失了一丢丢性能,但避免了无限的bug)。同时,注意我将key直接设置为路由的完整路径,一举两得。

<router-view :key="$route.fullpath"></router-view>

第四招: 无所不能的render函数

场景还原:
vue要求每一个组件都只能有一个根元素,当你有多个根元素时,vue就会给你报错

<template>
 <li
   v-for="route in routes"
   :key="route.name"
 >
   <router-link :to="route">
     {{ route.title }}
   </router-link>
 </li>
</template> ERROR - Component template should contain exactly one root element.
   If you are using v-if on multiple elements, use v-else-if
   to chain them instead.

招式解析:
那有没有办法化解呢,答案是有的,只不过这时候我们需要使用render()函数来创建HTML,而不是template。其实用js来生成html的好处就是极度的灵活功能强大,而且你不需要去学习使用vue的那些功能有限的指令API,比如v-for, v-if。(reactjs就完全丢弃了template)

functional: true,
render(h, { props }) {  return props.routes.map(route =>
   <li key={route.name}>      <router-link to={route}>
       {route.title}      </router-link>
   </li>
 )
}

第五招:无招胜有招的高阶组件

划重点:这一招威力无穷,请务必掌握
当我们写组件的时候,通常我们都需要从父组件传递一系列的props到子组件,同时父组件监听子组件emit过来的一系列事件。举例子:

//父组件<BaseInput
   :value="value"
   label="密码"
   placeholder="请填写密码"
   @input="handleInput"
   @focus="handleFocus>
</BaseInput>//子组件<template>
 <label>
   {{ label }}
   <input
     :value="value"
     :placeholder="placeholder"
     @focus=$emit('focus', $event)"
     @input="$emit('input', $event.target.value)"
   >
 </label>
</template>

有下面几个优化点:

1.每一个从父组件传到子组件的props,我们都得在子组件的Props中显式的声明才能使用。这样一来,我们的子组件每次都需要申明一大堆props, 而类似placeholer这种dom原生的property我们其实完全可以直接从父传到子,无需声明。方法如下:

    <input
     :value="value"
     v-bind="$attrs"
     @input="$emit('input', $event.target.value)"
   >  

$attrs包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定,并且可以通过 v-bind="$attrs" 传入内部组件——在创建更高层次的组件时非常有用。

2.注意到子组件的@focus=$emit('focus', $event)"其实什么都没做,只是把event传回给父组件而已,那其实和上面类似,我完全没必要显式地申明:

<input
   :value="value"
   v-bind="$attrs"
   v-on="listeners"> computed: {
 listeners() {
   return {
     ...this.$listeners,      input: event =>
       this.$emit('input', event.target.value)
   }
 }
}

$listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

3.需要注意的是,由于我们input并不是BaseInput这个组件的根节点,而默认情况下父作用域的不被认作 props 的特性绑定将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。所以我们需要设置inheritAttrs:false,这些默认行为将会被去掉, 以上两点的优化才能成功。

Vue.js最佳实践(五招让你成为Vue.js大师)的更多相关文章

  1. Vue.js最佳实践(五招助你成为vuejs大师)

    转自https://www.jb51.net/article/139448.htm 本文面向对象是有一定Vue.js编程经验的开发者.如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给 ...

  2. Vue.js最佳实践

    Vue.js最佳实践 第一招:化繁为简的Watchers 场景还原: created(){ this.fetchPostList() }, watch: { searchInputValue(){ t ...

  3. JavaScript best practices JS最佳实践

    JavaScript best practices JS最佳实践 0 简介 最佳实践起初比较棘手,但最终会让你发现这是非常明智之举. 1.合理命名方法及变量名,简洁且可读 var someItem = ...

  4. nodejs 实践:express 最佳实践(五) connect解析

    nodejs 实践:express 最佳实践(五) connect解析 nodejs 发展很快,从 npm 上面的包托管数量就可以看出来.不过从另一方面来看,也是反映了 nodejs 的基础不稳固,需 ...

  5. require.js 最佳实践【转】

    https://www.cnblogs.com/digdeep/p/4607131.html require.js是一个js库,相关的基础知识,前面转载了两篇博文:Javascript模块化编程(re ...

  6. require.js 最佳实践

    require.js是一个js库,相关的基础知识,前面转载了两篇博文:Javascript模块化编程(require.js), Javascript模块化工具require.js教程,RequireJ ...

  7. Vue.js最佳实践--给大量子孙组件传值(provide/inject)

    开发中有个需求,有个Parent组件(例如div)下,输入框,下拉框,radiobutton等可编辑的子孙组件几百个,根据某个值统一控制Parent下面的所有控件的disabled状态 类似于这样,给 ...

  8. Vue 工程化最佳实践

    目录结构 总览   api 目录用于存放 api 请求,文件名与模型名称基本一致,文件名使用小驼峰,方法名称与后端 restful 控制器一致.   enums 目录存放 常量,与后端的常量目录对应 ...

  9. Vue.js最佳实践--VueRouter的beforeEnter与beforeRouteLeave冲突解决

    用Vue做应用管理系统,通常会在离开某个页面的时候,需要检测用户是否有修改,询问用户需要不需要保存之类的需求 这时候,在读VueRouter文档:组件内的守卫 的时候,发现beforeRouteLea ...

随机推荐

  1. Coredump及调试

    1.查看是否打开了coredump lybxin@Inspiron:~/MyRes/miscellany/test/01_coredump$ulimit -c  #这里可以看到ulimit限制core ...

  2. 【week2】 四则运算改进

    四则运算满足简单加减乘除,以及包含括号的复杂四则运算. 代码描述: 1.采用random随机数产生要参与计算的数字,以及运算符号 2.采用Scanner获取控制台输入的结果,与计算出来的结果进行比对, ...

  3. Sqoop使用笔记(转载)

    Sqoop是Apache顶级项目,主要用来在Hadoop和关系数据库中传递数据.通过sqoop,可以方便的将数据从关系数据库导入到HDFS,或将数据从HDFS导出到关系数据库. 关于Sqoop 官网S ...

  4. 含html转义字符编码(&#22235;)转换--python

    在抓取下来的网页源码显示的是如下的内容,而不是可读性的汉字 (当然,如果是在Web页面上展示,则实体会自动被浏览器转为原字符,正常显示) 经查资料后得知, 在网页中以四开头的是HTML实体,具体什么是 ...

  5. 【bzoj1606】[Usaco2008 Dec]Hay For Sale 购买干草 背包dp

    题目描述 约翰遭受了重大的损失:蟑螂吃掉了他所有的干草,留下一群饥饿的牛.他乘着容量为C(1≤C≤50000)个单位的马车,去顿因家买一些干草.  顿因有H(1≤H≤5000)包干草,每一包都有它的体 ...

  6. Android UI设计的基本元素有哪些

    在android app开发如火如荼的今天,如何让自己的App受人欢迎.如何增加app的下载量和使用量....成为很多android应用开发前,必须讨论的问题.而ui设计则是提升客户视觉体验度.提升下 ...

  7. CentOS 双网卡绑定实现平衡负载

    绑定两块网卡主要为了解决网卡故障.负载均衡等问题. 1.在vm加一块网卡,登录后检查网卡是否识别. 分别用ip addr和nmcli查看网卡的情况 [root@bigdata-senior01 ~]# ...

  8. [CF1037H] Security

    题目链接 codeforces. 洛谷. Solution 按照套路,可以\(SAM\)上线段树合并求出\(endpos\)集合,然后随便贪心一下就好了. #include<bits/stdc+ ...

  9. POJ3304:Segments——题解

    http://poj.org/problem?id=3304 题目大意:给n条线段,求是否存在一条直线,将所有线段投影到上面,使得所有投影至少交于一点. ——————————————————————— ...

  10. POJ3057:Evacuation——题解

    http://poj.org/problem?id=3057 题目大意: .为人,D为门,X为障碍,门每秒只能出去一个人,问多少秒出光. 如果无法出光输出impossible. ——————————— ...