vue hook应用场景:
实现了mixins的功能,并且解决了mixins的两个问题
允许相互传递状态
明确指出了逻辑来自哪里
使用 Hooks,函数的返回值会记录消费的值。
vue-hooks是简化组件定义、复用状态逻辑的一种最新尝试,且结合 Vue 实例的特点提供了适用的 Hooks
hooks.js中的this为当前vue实例
react-hooks
hooks只能出现在函数作用域的顶级,不能出现在条件语句、循环语句中、嵌套函数中。
一、父组件监测其他组件的生命周期
<Child @hook:created=“updateChange” @hook:updated=“updateChange”>{{msg}}
二、清除定时器比较好的方法,用hook:
export default{
methods:{
fun1(){
const timer = setInterval(()=>{
//需要做的事情
console.log(11111);
},1000);
this.$once('hook:beforeDestory',()=>{
clearInterval(timer);
timer = null;
})
}
}
}
下面的用法有2个问题
1、vue实例中需要有这个定时器的实例,感觉有点多余;
2、 创建的定时器代码和销毁定时器的代码没有放在一起,通常很容易忘记去清理这个定时器,不容易维护;
export default{
data(){
timer:null
},
this.timer = setInterval(()=>{
//需要做的事情
},1000),
beforeDestory(){
clearInterval(this.timer);
this.timer = null;
}
}
三、当生命周期函数内容很多,代码很分散,不好维护,可以用hook
<script>
export default {
created() {
xxxx.init()
this.$once('hook:mounted', () => {
xxxx.start()
})
this.$on('hook:mounted', () => {
xxxx.start()
})
this.$on('hook:updated', () => {
xxxx.update()
})
this.$once('hook:beforeDestroy', () => {
xxxx.destroy()
})
}
}
</script>