你知道吗，在vue里，每个小部件就像咱们人一样，有它自己的生命历程。首先是出生，然后成长，再步入衰老最终走到终点。不过，得按这个顺序来~如果你想捣鼓捣鼓？小事儿一桩！随时随地都能对那个叫“钩子函数”的东西动手脚，只需轻轻一改，小部件就会彻底换个样子哟~
猜咋滴？Vue组件跟咱们人差不多，出生、上路、更替、跑了四个阶段。每个环节都有小帮手在背后默默帮忙，比如created一登场就搞定了数据设置；妹子mounted则是偷偷摸摸地处理改变DOM元素；至于beforeDestroy，它可是最后关头的清道夫，帮我们处理收尾事宜。这样一来，无论遇到什么状况，咱都能稳住阵脚，轻松掌控组件的活跃度！
Vue生命周期的不同阶段
咱们其实都晓得，Vue把组件搞得很有条理，每个趴窗子就做自己该做的事情，然后和别人串起门来。看看这8个步骤，它们其实是这么排的：
每次新项目開始，我們首先得先做个叫”BeforeCreate”的工作。现下，什么都看不到，也没开工！
顺利搞定！:所以说你之前提过的那个例子，现在就算小伙伴们有学士学位也能看懂那堆数据，还能计算出属性乖乖，最后就能直接变成咱们能用上的计算公式！至于那个挂载部分，我们还没开始着手~
提前触发：还没正式挂载呢它就到了，第一轮渲染也就开始了。
直接换新的VM.$el，再抓住实例不放，那钩子就能被触发！
这个“Before Update”小程序，就像个小保姆，当你网站要更新数据时，它会跑来给你看看网页有没有问题
var vm = new Vue({
el: '#app',
data: {
message: ''
},
beforeCreate: function () {
console.log('beforeCreate !')
},
created: function () {
console.log('created !')
},
beforeMount: function () {
console.log('beforeMount !')
},
mounted: function () {
console.log('mounted !')
},
beforeUpdate: function () {
console.log('beforeUpdate !')
},
updated: function () {
console.log('updated !')
},
beforeDestroy: function () {
console.log('beforeDestroy !')
},
destroyed: function () {
console.log('destroyed !')
}
})
太棒了！新数据来了，还得添点新的虚拟Dom和处理一些小问题。
就快过期了的话：要抓紧时间用完，这时候其实还挺好使的！
8. destroyed：Vue 实例销毁后调用。
如何使用钩子函数和生命周期？
敲黑板别错过Vue要搞定这些函数和周期功能简直太轻松了！首先，咱们先定义一个组件，然后取个名字，比如大家都知道的created、mounted、beforeDestroy这类。下面就是添加我们想要实现的任务，完成！搞定！
Vue.component('my-component', {
template: 'My Component',
beforeCreate: function () {
console.log('beforeCreate !')
},
created: function () {
console.log('created !')
},
beforeMount: function () {
console.log('beforeMount !')
},
mounted: function () {
console.log('mounted !')
},
beforeUpdate: function () {
console.log('beforeUpdate !')
},
updated: function () {
console.log('updated !')
},
beforeDestroy: function () {
console.log('beforeDestroy !')
},
destroyed: function () {
console.log('destroyed !')
}
})
没错儿，咱们完全可以自个手动往组件里设置钩子函数哟。这么一来，任务就能按咱个人喜好定制事先弄好的钩子函数就像个得力助手，随时随地等着帮我们做事！
你听说过Vue的混搭功能吗？就像打电话一样，你可以把一个组件功能扩展到多个组件中，这样不仅代码读起来轻松，还能提高代码的复用性！
总结
哎呦，别紧张，来这里就能明白Vue中的钩子函数和生命周期管理它们可是能帮咱们轻松掌握组件行为~用好了，组件状态、数据处理和清理工作啥的都不再是难题！
var mixin = {
beforeCreate: function () {
console.log('beforeCreate !')
},
created: function () {
console.log('created !')
},
beforeMount: function () {
console.log('beforeMount !')
},
mounted: function () {
console.log('mounted !')
},
beforeUpdate: function () {
console.log('beforeUpdate !')
},
updated: function () {
console.log('updated !')
},
beforeDestroy: function () {
console.log('beforeDestroy !')
},
destroyed: function () {
console.log('destroyed !')
}
};
Vue.component('my-component', {
mixins: [mixin],
template: 'My Component'
})
光搞定Vue app还不够，得看好钩子函数别乱来哟。想成为Vue大神吗？搞定它，你的作品就能惊艳众人~
兄弟，说说你是咋用Vue的生命周期管理功能的呗？每个部分都弄懂了吗？快来给我科普下你对Vue的钩子函数还有生命周期管理那玩意儿是啥看发！
评论0