Vue2的生命周期钩子
听说过Vue2的那8个钩子么？你可能不太了解，但它们可是在初始创建，之后创建，挂载前，挂载后等时处理特殊情况的秘诀哟~比如说，创建完实例就得忙活着初始化设置，或者等着DOM加载完毕再加些私人东西进去。有了这几招，组件咱也能轻松应对！而且还能提升编码速度与代码质量！
在vue2里面，有个叫做beforeCreate的函数。这个函数在节点初生之际，但还未开始参与实际动作（如监听数据、产生事件等）之时被调用，借此机会我们就可以进行与实例相关的操作！而另一个叫created的方法，含义截然不同：创建完成！这就意味着实例已经完整诞生了，包括监听数据、设定属性、配置方法等等，甚至连监控器和事件响应都搞定这时候，DOM刚刚起步，我们正好利用这个空档去获取需要的数据，又或是忙活着其他初期工作喽！
你听说过beforeMount这个神奇的钩子？它就像给挂上去的组件先热热身，先准备好所谓的假DOM。然后，mounted这个钩子是象征着组件正式上场，才开始动手干活，把组件放在真实DOM上。再来说说数据变了怎么办，别急，有两个钩子也会自动跳出来解决问题，它们叫做beforeUpdate和updated，负责更新前后的零碎东西。再来看看结束部分，还有两个钩子，分别叫做beforeDestroy和destroyed，组件消失之前和之后都会跑出来，这时候就能专心搞定清理定时器、解除绑定事件这些小麻烦了！
Vue3的生命周期钩子
告诉你们个好消息！Vue又出新版本了！这次添了俩超厉害的功能——新一代的两阶段挂钩和老钩子的进化版。老的钩子你还是可以用的，除此之外，还有四个全新的挂钩供你尝试：beforeUnmount呀、unmounted呀、beforeDeactivate呀和deactivated赶快来试试看！
组件不用的话，别立马跑路！得把那块地儿收拾好：要么用beforeUnmount勾子，要么用个unmounted小技巧。忙活完之后，还得赶紧把占有的资源给弄出去。然后，跟它们道别时有俩兄弟会等着你，嗯就是 beforeDeactivate 和 deactivated，换页时可得少不了这俩家伙。
Vue3又给咱带来了新亮点——生命周期钩子，它就像个摄像机，全程跟踪每一步你组件在变啥。这下可随意调整组件各种状态和行为，代码也变得更简单易懂，调试时找问题也轻松容易多！
代码示例
说到实际问题，咱们就来看看这段代码在Vue 3跟Vue 2中生命周期钩子有啥区别！
javascript
// Vue2示例
new Vue({
beforeCreate(){
console.log("创建Vue 2之前");
},
created(){
创建在Vue2。
beforeMount(){
"vue2开机前显示信息"
mounted(){
你看，我们已经成功地安装并运行了Vue2！
beforeUpdate(){
台词：在Vue2中准备更新！
updated(){
"更新！Vue2里，赶紧来看下~"
beforeDestroy(){
在Vue2的销毁阶段，先打印个消息。
Console.log('Vue2把我报废！')
}
// Vue3示例
Vue.component('my-component', {
beforeCreate: function () {
console.log('beforeCreate hook in Vue2');
},
created: function () {
console.log('created hook in Vue2');
},
beforeMount: function () {
console.log('beforeMount hook in Vue2');
},
mounted: function () {
console.log('mounted hook in Vue2');
},
beforeUpdate: function () {
console.log('beforeUpdate hook in Vue2');
},
updated: function () {
console.log('updated hook in Vue2');
},
beforeDestroy: function () {
console.log('beforeDestroy hook in Vue2');
},
destroyed: function () {
console.log('destroyed hook in Vue2');
},
template: 'My Component'
});
new Vue({
el: '#app'
});
const app = Vue.createApp({
别急，先看看Vue3的创建部分。
在Vue3创建的！
console.log(“Vue3的挂载前阶段”);
你好！我现已在Vue3中就位！
先看看更新前的vue3情况。
咱就这么说，更新到Vue3了。
},
const app = Vue.createApp({
beforeCreate() {
console.log('beforeCreate hook in Vue3');
},
created() {
console.log('created hook in Vue3');
},
beforeMount() {
console.log('beforeMount hook in Vue3');
},
mounted() {
console.log('mounted hook in Vue3');
},
beforeUpdate() {
console.log('beforeUpdate hook in Vue3');
},
updated() {
console.log('updated hook in Vue3');
},
beforeUnmount() {
console.log('beforeUnmount hook in Vue3');
},
unmounted() {
console.log('unmounted hook in Vue3');
},
beforeDeactivate() {
console.log('beforeDeactivate hook in Vue3');
},
deactivated() {
console.log('deactivated hook in Vue3');
},
template: 'My Component'
});
app.mount('#app');
beforeUnmount(){
Vue3还没搞定，别忘了看看这个”Before Unmount”。
unmounted(){
在Vue3里面，已经把这个功能卸载掉了，所以别管它了！
beforeDeactivate(){
哈喽！快看这儿，看到他们两个老伙伴了吗？就在Vue3里~
deactivated(){
“Vue3把它停掉了，让我告诉你。”
});
app.mount(‘#app’);
你知道吗？Vue3里加了好多新的钩子，和老版有些不太一样了。现在你能更随心所欲地操作组件了，想怎么加都行！
结论
哎呦，Vue 3这次出手大方，给咱们添了好多好用的周期钩子。你们得好好琢磨两版之间的区别，多看点实际用例，才能摸透如何玩转这些新花样！
，你听说过新的“生命周期钩子”吗？觉得咋样？对咱们玩 Vue 有啥帮助不？想不想试试升级到 Vue3,用新功能呀？赶紧在评论里说说你怎么想！
评论0