1. 内部监听生命周期函数
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组件中，可以用过$on,$once去监听所有的生命周期钩子函数，如监听组件的updated钩子函数可以写成 this.$on('hook:updated', () => {})
2. 外部监听生命周期函数
今天同事在公司群里问，想在外部监听组件的生命周期函数，有没有办法啊？
为什么会有这样的需求呢，原来同事用了一个第三方组件，需要监听第三方组件数据的变化，但是组件又没有提供change事件，同事也没办法了，才想出来要去在外部监听组件的updated钩子函数。查看了一番资料，发现Vue支持在外部监听组件的生命周期钩子函数。
<template>
<!--通过@hook:updated监听组件的updated生命钩子函数-->
<!--组件的所有生命周期钩子都可以通过@hook:钩子函数名 来监听触发-->
<custom-select @hook:updated="$_handleSelectUpdated" />
</template>
<script>
import CustomSelect from '../components/custom-select'
export default {
components: {
CustomSelect
},
methods: {
$_handleSelectUpdated() {
console.log('custom-select组件的updated钩子函数被触发')
}
}
}
</script>
开发全局组件，你可能需要了解一下Vue.extend
开发loading组件
<template>
<transition name="custom-loading-fade">
<!--loading蒙版-->
<div v-show="visible" class="custom-loading-mask">
<!--loading中间的图标-->
<div class="custom-loading-spinner">
<i class="custom-spinner-icon"></i>
<!--loading上面显示的文字-->
<p class="custom-loading-text">{{ text }}</p>
</div>
</div>
</transition>
</template>
<script>
export default {
props: {
// 是否显示loading
visible: {
type: Boolean,
default: false
},
// loading上面的显示文字
text: {
type: String,
default: ''
}
}
}
</script>
开发出来loading组件之后，如果需要直接使用，就要这样去用
<template>
<div class="component-code">
<!--其他一堆代码-->
<custom-loading :visible="visible" text="加载中" />
</div>
</template>
<script>
export default {
data() {
return {
visible: false
}
}
}
</script>
但这样使用并不能满足我们的需求
1.可以通过js直接调用方法来显示关闭
2.loading可以将整个页面全部遮罩起来
通过Vue.extend将组件转换为全局组件
- 改造
loading组件，将组件的props改为data
export default {
data() {
return {
text: '',
visible: false
}
}
}
2.通过Vue.extend改造组件
// loading/index.js
import Vue from 'vue'
import LoadingComponent from './loading.vue'
// 通过Vue.extend将组件包装成一个子类
const LoadingConstructor = Vue.extend(LoadingComponent)
let loading = undefined
LoadingConstructor.prototype.close = function() {
// 如果loading 有引用，则去掉引用
if (loading) {
loading = undefined
}
// 先将组件隐藏
this.visible = false
// 延迟300毫秒，等待loading关闭动画执行完之后销毁组件
setTimeout(() => {
// 移除挂载的dom元素
if (this.$el && this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el)
}
// 调用组件的$destroy方法进行组件销毁
this.$destroy()
}, 300)
}
const Loading = (options = {}) => {
// 如果组件已渲染，则返回即可
if (loading) {
return loading
}
// 要挂载的元素
const parent = document.body
// 组件属性
const opts = {
text: '',
...options
}
// 通过构造函数初始化组件 相当于 new Vue()
const instance = new LoadingConstructor({
el: document.createElement('div'),
data: opts
})
// 将loading元素挂在到parent上面
parent.appendChild(instance.$el)
// 显示loading
Vue.nextTick(() => {
instance.visible = true
})
// 将组件实例赋值给loading
loading = instance
return instance
}
export default Loading
- 在页面使用
loading
import Loading from './loading/index.js'
export default {
created() {
const loading = Loading({ text: '正在加载。。。' })
// 三秒钟后关闭
setTimeout(() => {
loading.close()
}, 3000)
}
}
通过上面的改造，loading已经可以在全局使用了，如果需要像element-ui一样挂载到Vue.prototype上面，通过this.$loading调用，还需要改造一下
将组件挂载到Vue.prototype上面
Vue.prototype.$loading = Loading
// 在export之前将Loading方法进行绑定
export default Loading
// 在组件内使用
this.$loading()
网友评论