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


Posted in Javascript onMay 04, 2018

本文面向对象是有一定Vue.js编程经验的开发者。如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给你们写。

对大部分人来说,掌握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最佳实践(五招助你成为vuejs大师),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js url传值中文乱码之解决之道
Nov 20 Javascript
关于Jquery操作Cookie取值错误的解决方法
Aug 26 Javascript
JS+CSS实现精美的二级导航效果代码
Sep 17 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
ES6 Promise对象的应用实例分析
Jun 27 Javascript
vue中实现点击变成全屏的多种方法
Sep 27 Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 #jQuery
node实现的爬虫功能示例
May 04 #Javascript
基于jQuery.i18n实现web前端的国际化
May 04 #jQuery
JavaScript实现百度搜索框效果
Mar 26 #Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 #Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 #Javascript
JS模拟实现哈希表及应用详解
May 04 #Javascript
You might like
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
PHP 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
php 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
jquery tab插件制作实现代码
2010/06/22 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
Vue表单实例代码
2016/09/05 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
2017/01/13 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
5种Python单例模式的实现方式
2016/01/14 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
用Eclipse写python程序
2018/02/10 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
汤米巴哈马官方网站:Tommy Bahama
2017/05/13 全球购物
运动会四百米广播稿
2014/01/19 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
秋菊打官司观后感
2015/06/03 职场文书
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL
Python多线程 Queue 模块常见用法
2021/07/04 Python