直播网站建设项目策划书,wordpress 无法发送邮件,用微信怎么做企业网站,网站开发比较流行的框架目录前言几种用法用法一 将放在多个生命周期的逻辑#xff0c;统一到一个生命周期中用法二 监听子组件生命周期运行的情况运用场景场景一 许多时候#xff0c;我们不得不在不同的生命周期中执行某些逻辑#xff0c;并且这些逻辑会用到一些通用的变量#xff0c;这些通用变量…
目录前言几种用法用法一 将放在多个生命周期的逻辑统一到一个生命周期中用法二 监听子组件生命周期运行的情况运用场景场景一 许多时候我们不得不在不同的生命周期中执行某些逻辑并且这些逻辑会用到一些通用的变量这些通用变量按照之前的方式我们不得不存在data中。场景二 如果属于同一业务的逻辑要在不同的生命周期中执行下面这样会更利于阅读和维护。场景三想要监听别人封装好的组件(第三方组件)的生命周期你不可能去第三方子组件的生命周期中写代码。所有生命周期执行的顺序第一次渲染更新时组件摧毁时前言
hook是什么用来监听组件生命周期的回调函数。
这和生命周期函数mountedcreatedupdated有什么区别 区别1hook 会在对应的生命周期函数执行后执行。 区别2hook 可以在父组件监听子组件的生命周期运行情况。 从这段vue源代码中我们能看到hook的部分调用逻辑vm.$emit(hook: hook) 其实就是在调用我们写的hook:mountedxxxhook这个api却没有在官方文档中出现所以鲜有人知道它的存在和用法。
几种用法
用法一 将放在多个生命周期的逻辑统一到一个生命周期中
通常写法
export default {components: {},data: () {return {name: dx,};},created() {console.log(created)},beforeMount() {console.log(beforeMount)},mounted() {console.log(this.name);// 每一个小时刷新一次页面setInterval(() {location.reload()}, 60 * 60 * 1000);},
}hook的用法
export default {components: {},data: () {return {name: dx,};},created() {console.log(created);this.$on(hook:beforeMount, () {console.log(beforeMount);});this.$on(hook:mounted, () {console.log(this.name); // this 就是组件实例自己// 每一个小时刷新一次页面setInterval(() {location.reload();}, 60 * 60 * 1000);});},
};注意
按照生命周期执行的先后周期我们只能mounted生命周期里写这之后的生命周期而不能写hook:beforeMountthis.$on第二个回调函数的this指的是当前组件实例本身无论这个回调函数是否是箭头函数。
用法二 监听子组件生命周期运行的情况
通常写法
// 父组件
Children buttonRenderButtonRender/export default {name: Parents,components: {Children},data: () {return {name: dx,};},methods: {ButtonRender() {console.log(渲染完成)}}
}
// 子组件
export default {name: Children,components: {},data: () {},methods: {},mounted() {this.$emit(buttonRender)}
}hook的写法
Children hook:mountedButtonRender/export default {name: Parents,components: {Children},data: () {return {name: dx,};},methods: {ButtonRender() {console.log(渲染完成)}}
}注意
hook的写法可以不需要在子组件里面编写其它代码从vue源码中可以发现 vm.$emit(hook: hook) 这里虽然调用了hook但没有返回参数也就是说上面代码中ButtonRender没有默认参数。同样承接着2来说由于ButtonRender没有默认参数所以我们无法在ButtonRender函数中获取子组件Children的实例。
为了解决3的问题我尝试着想到一种方法利用ref获取子组件的实例将子组件的实例拿到父组件的this中。ButtonRender中的this就是父组件实例和寻常methods中的函数没区别。
Children refchild1 hook:mountedButtonRender/
export default {name: Parents,components: {Children},data: () {return {name: dx};},mounted() {},methods: {ButtonRender() {console.log(this.$refs.child1) // this.$refs.child1就是子组件Children的实例了console.log(渲染完成)}}
};但是我们都知道vue ref的绑定都是挂载完成之后所以这个方法也只能用在hook:mounted 、hook:updated等mounted之后执行的生命周期中而不能用在 比如hook:beforeMount中。
运用场景
场景一 许多时候我们不得不在不同的生命周期中执行某些逻辑并且这些逻辑会用到一些通用的变量这些通用变量按照之前的方式我们不得不存在data中。
script
export default {data() {return {timer:null}}mounted () {this.timer setInterval(() {// todo}, 1000);}beforeDestroy () {clearInterval(this.timer)}
}
/script优化后就不存在这个问题是不是很好用。
script
export default {mounted () {const timer setInterval(() {// todo}, 1000);this.$once(hook:beforeDestroy, function () {clearInterval(timer)})}
}
/script场景二 如果属于同一业务的逻辑要在不同的生命周期中执行下面这样会更利于阅读和维护。
export default {created() {this.$on(hook:mounted, () {挂载时执行一些业务A相关逻辑})this.$on(hook:updated, () {挂载时执行一些业务A相关逻辑})this.$once(hook:beforeDestroy, () {挂载时执行一些业务A相关逻辑})}
}场景三想要监听别人封装好的组件(第三方组件)的生命周期你不可能去第三方子组件的生命周期中写代码。
比如 element-ui 的button组件在子组件渲染完成后我想做某些逻辑变更。
el-button typeprimary hook:mountedButtonRender :disableddisabled{{name}}/el-buttonexport default {name: Parents,data: () {return {name: dx,disabled: true};},methods: {ButtonRender() {this.disabled falsethis.name yx}}
}所有生命周期执行的顺序
第一次渲染
父beforeCreate 父 hook:beforeCreate 父created 父 hook:created 父beforeMount 父 hook:beforeMount 子beforeCreate 子hook:beforeCreate 子created 子hook:created 子beforeMount 子hook:beforeMount 子mounted 子hook:mounted 父mounted 父 hook:mounted
更新时
父beforeUpdate 父hook:beforeUpdate 子beforeUpdate 子hook:beforeUpdate 子updated 子hook:updated 父updated 父hook:updated
组件摧毁时
父beforeDestroy 父hook:beforeDestroy 子beforeDestroy 子hook:beforeDestroy 子destroyed 子hook:destroyed 父destroyed 父hook:destroyed
以上内容涉及到vue父子组件生命周期执行顺序的知识但对于hook:xxx来说在xxx执行后就会立即执行hook:xxx
