你绝对疏忽的 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
- 发表于:
- 原文链接：https://kuaibao.qq.com/s/20200630A0T6ED00?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
