你绝对疏忽的 vue 技巧-一

1. 内部监听生命周期函数

export default {

mounted() {

this.chart = echarts.init(this.$el)

// 请求数据，赋值数据 等等一系列操作...

// 监听窗口发生变化，resize组件

window.addEventListener('resize', this.$_handleResizeChart)

},

updated() {

// 干了一堆活

},

created() {

// 干了一堆活

},

beforeDestroy() {

// 组件销毁时，销毁监听事件

window.removeEventListener('resize', this.$_handleResizeChart)

},

methods: {

$_handleResizeChart() {

this.chart.resize()

},

// 其他一堆方法

}

}

功能写完开开心心的提测了，测试没啥问题，产品经理表示做的很棒。然而code review时候，技术大佬说了，这样有问题。大佬：这样写不是很好，应该将监听resize事件与销毁resize事件放到一起，现在两段代码分开而且相隔几百行代码，可读性比较差

我：那我把两个生命周期钩子函数位置换一下，放到一起?

大佬：hook听过没？

我：Vue3.0才有啊，咋，咱要升级Vue?

export default {

mounted() {

this.chart = echarts.init(this.$el)

// 请求数据，赋值数据 等等一系列操作...

// 监听窗口发生变化，resize组件

window.addEventListener('resize', this.$_handleResizeChart)

// 通过hook监听组件销毁钩子函数，并取消监听事件

this.$once('hook:beforeDestroy', () => {

window.removeEventListener('resize', this.$_handleResizeChart)

})

},

updated() {},

created() {},

methods: {

$_handleResizeChart() {

// this.chart.resize()

}

}

}

看完代码，恍然大悟，大佬不愧是大佬，原来Vue还可以这样监听生命周期函数。在Vue组件中，可以用过

once去监听所有的生命周期钩子函数，如监听组件的updated钩子函数可以写成 this.$on('hook:updated', () => {})

2. 外部监听生命周期函数

今天同事在公司群里问，想在外部监听组件的生命周期函数，有没有办法啊？为什么会有这样的需求呢，原来同事用了一个第三方组件，需要监听第三方组件数据的变化，但是组件又没有提供change事件，同事也没办法了，才想出来要去在外部监听组件的updated钩子函数。查看了一番资料，发现Vue支持在外部监听组件的生命周期钩子函数。

import CustomSelect from '../components/custom-select'

export default {

components: {

CustomSelect

},

methods: {

$_handleSelectUpdated() {

console.log('custom-select组件的updated钩子函数被触发')

}

}

}

小项目还用Vuex?用Vue.observable手写一个状态管理吧

import Vue from 'vue'

// 通过Vue.observable创建一个可响应的对象

export const store = Vue.observable({

userInfo: {},

roleIds: []

})

// 定义 mutations, 修改属性

export const mutations = {

setUserInfo(userInfo) {

store.userInfo = userInfo

},

setRoleIds(roleIds) {

store.roleIds = roleIds

}

}

在组件中引用

{{ userInfo.name }}

import { store, mutations } from '../store'

export default {

computed: {

userInfo() {

return store.userInfo

}

},

created() {

mutations.setUserInfo({

name: '子君'

})

}

}

开发全局组件，你可能需要了解一下Vue.extendVue.extend是一个全局Api,平时我们在开发业务的时候很少会用到它，但有时候我们希望可以开发一些全局组件比如Loading,Notify,Message等组件时，这时候就可以使用Vue.extend。同学们在使用element-ui的loading时，在代码中可能会这样写

// 显示loading

const loading = this.$loading()

// 关闭loading

loading.close()

这样写可能没什么特别的，但是如果你这样写

const loading = this.$loading()

const loading1 = this.$loading()

setTimeout(() => {

loading.close()

}, 1000 * 3)

这时候你会发现，我调用了两次loading,但是只出现了一个，而且我只关闭了loading，但是loading1也被关闭了。这是怎么实现的呢？我们现在就是用Vue.extend + 单例模式去实现一个loading