Vue.js进阶知识点总结


Posted in Javascript onApril 01, 2018

对大部分人来说,掌握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的相关进阶知识点,感谢大家对三水点靠木的支持。

Javascript 相关文章推荐
类似CSDN图片切换效果脚本
Sep 17 Javascript
JQuery打造PHP的AJAX表单提交实例
Nov 03 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
Mar 14 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 Javascript
vue 指定组件缓存实例详解
Apr 01 #Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 #Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 #Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 #Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 #Javascript
对Angular中单向数据流的深入理解
Mar 31 #Javascript
jQuery中复合选择器简单用法示例
Mar 31 #jQuery
You might like
PHP中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
PHP调试函数和日志记录函数分享
2015/01/31 PHP
PHP引用的调用方法分析
2016/04/25 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
基于node.js的快速开发透明代理
2010/12/25 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
python同时给两个收件人发送邮件的方法
2015/04/30 Python
Python 数据结构之队列的实现
2017/01/22 Python
pytorch masked_fill报错的解决
2020/02/18 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
Puma印度官网:德国运动品牌
2019/10/06 全球购物
医生进修自我鉴定
2014/01/19 职场文书
优秀学生评语大全
2014/04/25 职场文书
2014年会策划方案
2014/05/11 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
导师工作推荐信
2015/03/27 职场文书
毕业设计致谢词
2015/05/14 职场文书
元宵节晚会主持词
2015/07/01 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python