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 相关文章推荐
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 Javascript
JavaScript截取字符串的2个函数介绍
Aug 27 Javascript
一个JavaScript用逗号分割字符串实例
Sep 22 Javascript
JavaScript和CSS交互的方法汇总
Dec 02 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
Mar 05 Javascript
JavaScript中textRange对象使用方法小结
Mar 24 Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 Javascript
原生js中ajax访问的实例详解
Sep 19 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
使用vue cli4.x搭建vue项目的过程详解
May 08 Javascript
使用 JavaScript 制作页面效果
Apr 21 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
利用static实现表格的颜色隔行显示
2006/10/09 PHP
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
纯js分页代码(简洁实用)
2013/11/05 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
Node.js实现文件上传
2016/07/05 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
原生js实现随机点名
2020/07/05 Javascript
python mysqldb连接数据库
2009/03/16 Python
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
python使用matplotlib画饼状图
2018/09/25 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
python 实现return返回多个值
2019/11/19 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
python调用私有属性的方法总结
2020/07/24 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
python RSA加密的示例
2020/12/09 Python
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
家长对孩子的评语
2014/04/18 职场文书
新郎结婚保证书
2015/02/26 职场文书
我的1919观后感
2015/06/03 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书