• .stop：阻止事件冒泡，和原生 event.stopPropagation() 是一样的效果。如上代码，当点击 p 标签的时候， div 上的点击事件也会触发，加上 .stop 后事件就不会往父级传递，那父级的事件就不会触发了。

• .prevent：阻止默认事件，和原生的 event.preventDefault() 是一样的效果。比如一个带有 href 的链接上添加了点击事件，那么事件触发的时候也会触发链接的跳转，但是加上 .prevent 后就不会触发链接跳转了。

• .capture：默认的事件流是：捕获阶段-目标阶段-冒泡阶段，即事件从最具体目标元素开始触发，然后往上冒泡。而加上 .capture 后则是反过来，外层元素先触发事件，然后往深层传递。

• .self：只触发自身的事件，不会传递到父级，和 .stop 的作用有点类似。

• .once：只会触发一次该事件。

• .passive：当页面滚动的时候就会一直触发 onScroll 事件，这个其实是存在性能问题的，尤其是在移动端，当给他加上 .passive 后触发的就不会那么频繁了。

• .native：现在在组件上使用 v-on 只会监听自定义事件 (组件用 $emit 触发的事件)。如果要监听根元素的原生事件，可以使用 .native 修饰符，比如如下的 el-input，如果不加 .native 当回车的时候就不会触发 search 函数。

  <el-input type="text" v-model="name" @keyup.enter.native="search"></el-input>

❝

串联使用事件修饰符的时候，需要注意其顺序，同样2个修饰符进行串联使用，顺序不同，结果大不一样。@click.prevent.self 会阻止所有的点击事件，而 @click.self.prevent 只会阻止对自身元素的点击。

❞

鼠标按钮修饰符

• .left：鼠标左键点击；

• .right：鼠标右键点击；

• .middle：鼠标中键点击；

键盘按键修饰符

Vue 提供了一些常用的按键码：

• .enter

• .tab

• .delete (捕获“删除”和“退格”键)

• .esc

• .space

• .up

• .down

• .left

• .right

另外，你也可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符，比如可以通过如下的代码来查看具体按键的键名是什么：

<input @keyup="onKeyUp">

onKeyUp(event) {     console.log(event.key)  // 比如键盘的方向键向下就是 ArrowDown }

.exact修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

`
A

A

A
`

.sync修饰符

.sync 修饰符常被用于子组件更新父组件数据。直接看下面的代码：

// parent.vue <child :title.sync="title"></child>

// child.vue this.$emit('update:title', 'hello')

子组件可以直接通过 update:title 的形式进行更新父组件中声明了 .sync 的 prop。上面父组件中的写法其实是下面这种写法的简写：

<child :title="title" @update:title="title = $event"></child>

❝

注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用

❞

如果需要设置多个 prop，比如：

<child :name.sync="name" :age.sync="age" :sex.sync="sex"></child>

可以通过 v-bind.sync 简写成这样：

<child v-bind.sync="person"></child>

person: {     name: 'bubuzou',     age: 21,     sex: 'male', }

Vue 内部会自行进行解析把 person 对象里的每个属性都作为独立的 prop 传递进去，各自添加用于更新的 v-on 监听器。而从子组件进行更新的时候还是保持不变，比如：

this.$emit('update:name', 'hello')

6种方式编写可复用模块

今天需求评审了一个需求，需要实现一个详情页，这个详情页普通用户和管理员都能进去，但是展示的数据有稍有不同，但绝大部分是一样的；最主要的区别是详情对于普通用户是纯展示，而对于管理员要求能够编辑，然后管理员还有一些别的按钮权限等。需求看到这里，如果在排期的时候把用户的详情分给开发A做，而把管理员的详情分给B去做，那这样做的结果就是开发A写了一个详情页，开发B写了一个详情页，这在开发阶段、提测后的修改 bug 阶段以及后期迭代阶段，都需要同时维护这 2 个文件，浪费了时间浪费了人力，所以你可以从中意识到编写可复用模块的重要性。

而 Vue 作者尤大为了让开发者更好的编写可复用模块，提供了很多的手段，比如：组件、自定义指令、渲染函数、插件以及过滤器等。

组件

组件是 Vue 中最精髓的地方，也是我们平时编写可复用模块最常用的手段，但是由于这块内容篇幅很多，所以不在这里展开，后续会写相关的内容进行详述。

使用混入mixins

什么是混入呢？从代码结构上来看，混入其实就是半个组件，一个 Vue 组件可以包括 template、script 和 style 三部分，而混入其实就是 script 里面的内容。一个混入对象包含任意组件选项，比如 data、methods、computed、watch 、生命周期钩子函数、甚至是 mixins 自己等，混入被设计出来就是旨在提高代码的灵活性、可复用性。

什么时候应该使用混入呢？当可复用逻辑只是 JS 代码层面的，而无 template 的时候就可以考虑用混入了。比如需要记录用户在页面的停留的时间，那我们就可以把这段逻辑抽出来放在 mixins 里：

`// mixins.js
export const statMixin = {
    methods: {
        enterPage() {},
        leavePage() {},
    },
    mounted() {
        this.enterPage()
    },
    beforeDestroyed() {
        this.leavePage()
    }
}

`

然后在需要统计页面停留时间的地方加上：

import { statMixin } from '../common/mixins' export default {     mixins: [statMixin] }

使用混入的时候要注意和组件选项的合并规则，可以分为如下三类：

• data 将进行递归合并，对于键名冲突的以组件数据为准：

  `// mixinA 的 data
  data() {
      obj: {
          name: 'bubuzou',
      },
  }

  // component A
  export default {
      mixins: [mixinA],
      data(){
          obj: {
              name: 'hello',
              age: 21
          },
      },
      mounted() {
          console.log( this.obj )  // { name: 'bubuzou', 'age': 21 }
      }
  }
  `

• 对于生命周期钩子函数将会合并成一个数组，混入对象的钩子将先被执行：

  `// mixin A
  const mixinA = {
      created() {
          console.log( '第一个执行' )
      }
  }

  // mixin B
  const mixinB = {
      mixins: [mixinA]
      created() {
          console.log( '第二个执行' )
      }
  }

  // component A
  export default {
      mixins: [mixinB]
      created() {
          console.log( '最后一个执行' )
      }
  }
  `

• 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

自定义指令

除了 Vue 内置的一些指令比如 v-model、v-if 等，Vue 还允许我们自定义指令。在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。比如我们可以通过自定义一个指令来控制按钮的权限。我们期望设计一个如下形式的指令来控制按钮权限：

<button v-auth="['user']">提交</button>

通过在按钮的指令里传入一组权限，如果该按钮只有 admin 权限才可以提交，而我们传入一个别的权限，比如 user，那这个按钮就不应该显示了。接下来我们去注册一个全局的指令：

`// auth.js
const AUTH_LIST = ['admin']

function checkAuth(auths) {
    return AUTH_LIST.some(item => auths.includes(item))
}

function install(Vue, options = {}) {
    Vue.directive('auth', {
        inserted(el, binding) {
            if (!checkAuth(binding.value)) {
                el.parentNode && el.parentNode.removeChild(el)
            }
        }
    })
}

export default { install }
`

然后我们需要在 main.js 里通过安装插件的方式来启用这个指令：

import Auth from './utils/auth' Vue.use(Auth)

使用渲染函数

这里将使用渲染函数实现上面介绍过的的权限按钮。使用方式如下，把需要控制权限的按钮包在权限组件 authority 里面，如果有该权限就显示，没有就不显示。

<authority :auth="['admin']">     <button>提交</button> </authority>

然后我们用渲染函数去实现一个 authority 组件：

`
`

全局注册这个组件：

// main.js import Authority from './components/authority' Vue.component('authority', Authority)

使用过滤器

Vue 提供了自定义过滤器的功能，主要应用场景是想要将数据以某种格式展示出来，而原始数据又不符合这种格式的时候。比如有一组关于人的数据，如下：

[{     name: '张茂',     population: 'young', }, {     name: '王丽',     population: 'middle', }, {     name: '郝鹏程',     population: 'child', }]

其中有一项是关于按照年龄划分的群体类型 population，而它是用 code 进行标识的，我们希望在展示的时候能够显示成对应的中文意思，比如 young 显示成青年。那我们就可以定义一个如下的局部过滤器：

export default {     filters: {         popuFilters(value) {             if (!value) { return '未知' }             let index = ['child', 'lad', 'young', 'middle', 'wrinkly'].indexOf(value)             return index > 0 && ['儿童', '少年', '青年', '中年', '老年'][index] || '未知'         }     } }

使用过滤器的时候只要在 template 中这样使用即可：

<p>{{ item.population | popuFilters }}</p>

自定义插件

在某些情况下，我们封装的内容可能不需要使用者对其内部代码结构进行了解，其只需要熟悉我们提供出来的相应方法和 api 即可，这需要我们更系统性的将公用部分逻辑封装成插件，来为项目添加全局功能，比如常见的 loading 功能、弹框功能等。

开发 Vue 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。可以通过如下4种方式来自定义插件：

`MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}
`

然后需要在入口文件，比如 main.js 中注册插件：

import MyPlugin from './plugins/plugins.js' Vue.use(MyPlugin)

3种方式手写优雅代码

平时写项目的时候我们都是在第一时间完成需求功能的开发、提测修改 bug 等，然后开开心心的等待着发布生产以为没啥事情了。其实回过头来细细的看我们平时写的代码，可能会发现很多地方都是值得优化的，比如对于很多重复性很强的代码，比如对于某些写得很繁杂的地方。优雅的代码可以化机械为自动、化繁为简，看人开了如沐春风，心情大好。这里列了几个在 Vue 中一定会遇到的问题，然后通过优雅的方式进行解决。

自动化导入模块

在开发一个稍微大点的项目的时候，会习惯将路由按照模块来划分，然后就可能会出现如下这种代码：

`// router.js
import Vue from 'vue'
import Router from 'vue-router'
// 导入了一大堆路由文件
import mediator from './mediator'
import judges from './judges'
import disputeMediation from './disputeMediation'
import onlineMediation from './onlineMediation'
import useraction from './useraction'
import organcenter from './organcenter'
import admin from './admin'

let routeList = []
routeList.push(mediator, judges, disputeMediation, onlineMediation, useraction, organcenter, admin)
 
export default new Router({
    mode: 'history',
    routes: routeList,
})
`

其实真实的远远不止这么点，就我本地项目而言就有20几个路由文件，写了一大堆的导入代码，显得很臃肿，更无奈的是每当需要新增一个路由模块，还得再次 import 再次 push，那么有没有什么办法可以解决这个问题呢？答案自然是有的。

利用 webpack 的 require.context 就可以很优雅的解决这个问题，使用语法如下：

require.context(     directory,  // 搜索的目录     useSubdirectories = true,  // 是否搜索子目录     regExp = /^\.\/.*$/,  // 匹配的目标文件格式     mode = 'sync'  // 同步还是异步 )

有了这个语法，我们就能很容易的写出下面的代码：

`import Vue from 'vue'
import Router from 'vue-router'

let routeList = []
let importAll = require.context('@/publicResource/router', false, /.js$/)
importAll.keys().map(path => {
    // 因为 index.js 也在 @/publicResource/router 目录下，所以需要排除
    if (!path.includes('index.js')) {          
        //兼容处理：.default 获取 ES6 规范暴露的内容; 后者获取 commonJS 规范暴露的内容
        let router = importAll(path).default || importAll(path)
        routeList(router)
    }
})
 
export default new Router({
    mode: 'history',
    routes: routeList,
})
`

其实不仅仅只是用在导入路由模块这里，对于项目里任何需要导入大量本地模块的地方都可以使用这种方式来解决。

模块化注册插件

相信写 Vue 的同学们都知道 element-ui 这个组件库，在使用这个组件库的时候大部分都是只使用某些个别的组件，所以基本上都是按需引入需要的组件，然后就有如下一堆 Vue.use() 的代码：

`// main.js
import Vue from 'vue'
import {
    Input,
    Radio,
    RadioGroup,
    Checkbox,
    CheckboxGroup,
    Select
    // 还有很多组件
} from 'element-ui'

Vue.use(Input)
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(Checkbox)
Vue.use(CheckboxGroup)
Vue.use(Select)
`

这样写是没任何问题的，就是看着不够简洁舒服，那更优雅的做法是把这块逻辑抽到一个文件里，然后通过注册插件的方式来使用他们：

`// elementComponent.js
import {
    Input,
    Radio,
    RadioGroup,
    Checkbox,
    CheckboxGroup,
    Select
    // 还有很多组件
} from 'element-ui'

const components = {
    Input,
    Radio,
    RadioGroup,
    Checkbox,
    CheckboxGroup,
    Select
}
function install(Vue){
    Object.keys(components).forEach(key => Vue.use(components[key]))
}
export default { install }
`

然后在 main.js 里使用这个插件：

// main.js import Vue from 'vue' import elementComponent from './config/elementComponent' Vue.use(elementComponent)

优雅导出请求接口

不知道大伙是如何定义请求接口的，就我目前这个项目而言，是这么做的：

`// api.js
import http from './config/httpServer.js'

 /* 登入页面获取公钥 */
export const getPublicKey = (data) => {
    return http({ url: '/userGateway/user/getPublicKey' }, data)
}

// 用户登录
export const login = data => {
    return http({ url: '/userGateway/userSentry/login' }, data)
}

// 验证码登录
export const loginByCode = data => {
    return http({ url: '/userGateway/userSentry/loginByCode' }, data)
}
`

在组件中使用接口：

<script> import { getPublicKey } from './config/api.js' export default {     mounted() {         getPublicKey().then(res => {             // xxx         }).catch(err => {             // xxx         })     } } </script>

这一切都很正常，但，我们这个项目总共有200多个接口，按照上面这种定义方式的话，一个接口定义加上空行需要占用 5 行，所以如果把全部接口都定义到这个 api.js 里需要占用 1000 行左右，看了实在让人心很慌呀。所以觉得应该这个地方应该可以优化一下。

/userGateway/user/getPublicKey

上面这是一个后端给接口路径，斜杆把这个路径划分成 3 个子串，而最后一个子串必定是唯一的，所以我们可以从中做文章。于是乎就有了下面的代码：

`// api.js
const apiList = [
    '/userGateway/user/getPublicKey',  // 登入页面获取公钥
    '/userGateway/userSentry/login',  // 用户登录
    '/userGateway/userSentry/loginByCode',  // 验证码登录
]

let apiName, API = {}
apiList.forEach(path => {
    // 使用正则取到接口路径的最后一个子串，比如: getPublicKey
    apiName = /(?<=/)[^/]+$/.exec(path)[0]      
    API[apiName] = (data) => {
        return http({url: path}, data)
    }
})
export { API }
`

这样大概就把定义一个接口需要占用 5 行缩小到只需要 1 行了，大大减小了文件内容。在浏览这个文件的时候，我的鼠标滚轮也不会一直在滚滚滚了。

如果是这样定义接口的话，那在使用的时候还需要做点变化的：

<script> import { API } from './config/api.js' export default {     mounted() {         API.getPublicKey().then(res => {             // xxx         }).catch(err => {             // xxx         })     } } </script>

4种$event传参方式

在进行实际项目开发的时候经常会需要通过事件传递参数，这里总结了4种应用场景。

用于组件通信

比如子组件通过 $emit 来调用父组件方法的时候，可以在父组件中用 $event 接收到从子组件传递过来的参数：

// 子组件 <button @click="$emit('changeText', '18px')">点击加大字号</button>

// 父组件 <blog-post @changeText="changeText('article', $event)"></blog-post>

changeText(type, value) {     console.log(type, value)  // 'article' '18px' }

如果子组件传递过来的参数有多个，这个时候用 $event 就不太行了，此时可以用 arguments 代替：

// 子组件 <button @click="$emit('changeText', 'red', '18px')">点击改变样式</button>

// 父组件 <blog-post @changeText="changeText(...arguments, 'article')"></blog-post>

changeText(...value) {     console.log( value )  // ['red', '18px', 'article'] }

传递原生DOM事件对象

比如我们需要获取到当前的点击元素，就可以通过给点击事件传递 $event 参数：

<button @click="submit('first', $event)">提交</button>

submit(type, event) {     const target = event.target.tagName }

用于第三方类库事件回调

比如有一个组件里使用了好几个 element-ui 的分页组件，每个分页都有一个 current-change 事件，用来处理当分页改变之后的事情，这样的话我们就需要写多个回调函数，但是如果用以下方式，我们就也可以只写一个函数，通过 type 来判断是哪个分页的回调，而 $event 则用来传递 current-change 回调默认的参数：

`// 页面列表的分页
<el-pagination 
    @current-change="changePage('main', $event)">

// 弹窗A列表的分页
<el-pagination 
    @current-change="changePage('modalA', $event)">

// 弹窗B列表的分页
<el-pagination 
    @current-change="changePage('modalB', $event)">

`

changePage(type, page) {     const types = ['main', 'modalA', 'modalB']     types[type] && (this[types[type]].pageIndex = page) && this.getList(type) }

使用箭头函数处理

对于第三种场景，使用第三方类库组件的时候，需要给事件回调增加额外的参数，如果默认的回调参数只有1个那么我们就可以使用上面的那种方式，但是如果回调参数有多个的话，用 $event 就不好处理了，可以使用箭头函数。比如文件上传的时候，有个 on-change 属性，当文件变化的时候就会触发回调，正常情况下我们这样写是没问题的：

<el-upload :on-change="changeFile">     <el-button>上传</el-button> </el-upload>

changeFile(file, fileList) {}

但是如果一个组件里有多个文件上传，而我们又不想写多个 changeFile，那就需要传递额外的参数 type 了 ：

<el-upload :on-change="(file, fileList) => changeFile('org', file, fileList)">     <el-button>上传</el-button> </el-upload>

changeFile(type, file, fileList) {}

3种深入watch的用法

立即执行

watch 是 Vue 中的侦听器，可以侦听一个 Vue 实例上的数据，当数据变动的时候，就会触发该侦听器。所以他的应用场景就是：当某个数据变动后需要做什么的时候就可以使用 watch 啦。对于 watch，平常我们写得最多的估计是如下这种写法：

watch: {     list: function(val) {         this.getMsg()     } }

如果我们希望组件初始化的时候就执行一次 getMsg 方法，可以直接在 mounted 里调用：

mounted() {     this.getMsg() }

其实，还有一种更加简便的写法，通过给 watch 设置 immediate: true ，即可：

watch: {     list: {         handler(val) {  // 注意别写错成 handle             this.getMsg()         },         immediate: true     } }

深度监听

侦听器对于属性变更后会自动调用一次，但是仅限于该属性本身，如果变更的是属性的属性，则不会触发侦听回调，如果想要实现这个功能可以给 watch 加上 'deep: true' 即可：

watch: {     obj: {         handler(val) { // do something },         deep: true     } }, mounted() {     this.obj.name = 'bubuzou'  // 将触发 handler }

多个handlers

实际上，watch 可以设置为数组，支持类型为 String、Object 和 Function。触发后，多个处理函数都将被调用。

watch: {     obj: [         'print',         {             handler: 'print',             deep: true         },         function(val, oldValue) {             console.log(val)         }     ] }, methods: {     print() {         console.log(this.obj)     } }

5个其他开发小技巧

掌握 Vue 的开发小技巧，在一些特定的场景下真的很管用，这里列了一些常用的小技巧。

函数式组件实现零时变量

我们在使用插槽的时候，知道有一个叫做插槽 prop 的知识，今天我们用他和函数式组件结合在一块，实现一个零时变量的组件：

`// tempvar.vue

`

定义好了函数式组件，我们就可以在需要的地方引入且使用他：

``

``

可能细心的小伙伴发现了，要把名字前加个 hello、默认年龄设置为 18 用计算属性就可以了呀？为啥还要搞那么复杂，专门用一个函数式组件去实现呢？其实这个小技巧还是很有必要存在的，当许多组件都有这种数据的重新计算的时候，如果没有使用这个技巧，那么就需要写很多很多的计算属性，而有了函数式组件 tempvar 后，只需要在组件里引入他，然后写插槽就好了。就相当于把写计算属性的功夫花在了写插槽上了。总而言之，两种方式都可以实现类似的属性计算功能，该怎么选，随你喜欢啦。

调试template（不推荐）

在开发调试的时候经常会需要通过 console.log 来打印出某个数据对象来查看其内部的结构或者字段值，但是这样做肯定不必在 template 里将其输出更直接。比如有这样一个数据：

obj: {     name: 'bubuzou',     age: 21, }

在模板中展示：

<p>{{ obj }}</p>

页面渲染完成后会看到：

{ "name": "bubuzou", "age": 21 }

对于这样的渲染结果虽然没什么问题，但是如果这个 obj 是层级很深且字段很多的数据，显示出来就会一堆数据砸在一块，丝毫没有阅读体验。

因此基于这个背景，我们可以将 console.log 挂载在 Vue 的实例原型上：

// main.js Vue.prototype.$log = window.console.log

然后就可以开开心心在模板中使用他了：

<p>{{ $log( obj ) }}</p>

这样会在浏览器控制台输出当前的数据对象，在显示效果上和 console.log 直接打印别无二致。

但说了这么多，使用 Vue 进行开发调试还是强烈推荐官方的vue-devtools 工具，谁用谁知道。

监听子组件的钩子函数

通常如果我们想在子组件钩子函数触发的时候通知父组件，我们可以这样做：

// parent.vue <child @mounted="doSomething"></child>

// child.vue this.$emit('mounted')

其实还有一种更加简单的写法，那就是使用 hookEvent：

<child @hook:mounted="doSomething"></child>

钩子函数除了以上用法，还可以通过动态注册做一些别的事情，比如组件销毁前进行资源的释放：

mounted() {     let setIntervalId = setInterval(() => {         console.log(888);     }, 1000)          this.$once("hook:beforeDestroy", () => {         clearInterval(setIntervalId)         setIntervalId = null     }) }

路由参数解耦

参数解耦，啥意思呢？别着急，我们先来看比如对于这么一串路由：

const router = [{     path: '/home/:type/:id',     name: 'Home',     component: Home, }]

当前页面的路径是 http://xxx/detail/preview/21?sex=male，平时我们写代码的时候或多或少的会写出这种代码，在组件里使用 $route 给组件传参数：

mounted() {     if (this.$route.params.type === 'preview') {         this.isPreview = true     } else {         this.isPreview = false     }     this.id = this.$route.params.id     this.sex = this.$route.query.sex }

这样子写本身没什么问题，就是会使得组件和路由高度耦合，让组件只能在含有特定 URL 的页面中使用，限制了组件的通用性。其实，我们可以通过 props 传参，来解耦路由参数，将上面的路由配置改成如下：

const router = [{     path: '/home/:type/:id',     name: 'Home',     component: Home,     props: (route) => ({         type: route.params.type,         id: route.params.id,         sex: route.query.sex,     }) }]

然后在组件 props 加上参数：

props: ['type', 'id', 'sex']

组件里使用参数的时候就不需要用 this.$route，而是可以直接 this.type 即可。这样一来，这个组件就可以在任何地方使用了。

深度作用选择器

当给 style 加上 scoped，页面渲染完成后会给 html 和 css 选择器加上哈希值用于表示唯一性：

`
    提交