vue初体验-vue生命周期

拜托叫我小吴

已于 2022-08-10 15:18:09 修改

阅读量79

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-05-12 20:32:16 首次发布

本文链接：https://blog.csdn.net/weixin_61928334/article/details/124739133

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue实例从创建到销毁的生命周期，包括创建前后、挂载前后、更新前后和销毁前后的重要钩子函数。重点讲解了如何在不同生命周期阶段进行数据获取、DOM操作和资源清理。同时，阐述了页面和组件生命周期的执行顺序，以及页面跳转时生命周期的执行流程。在实际应用中，如需在created钩子中操作DOM，可以利用Vue的nextTick方法。

摘要由CSDN通过智能技术生成

人：出生到死亡的过程

vue生命周期：vue实例从创建到销毁的过程;主要是在不同的时段执行不同的事情;
常见的8个身影周期钩子函数（创建前后、挂载前后、更新前后、销毁前后）
另外三个： activated de-- errorCapture

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

new Vue({
    data:{},
    el: '#app' // 挂载点
})

每个生命周期执行的时机

创建前后：new Vue()

挂载前后： e l 也就是挂载dom

注意点：生命周期在创建之后才能够获取data数据；在挂载之后才能够获取dom元素

更新前后：监听的是更新试图或者说是 dom元素

销毁前后：

生命周期干什么事情

创建后：ajax操作；读取缓存操作

挂载后：也可以进行ajax操作；这里可以操作dom了

销毁后：页面有定时器、页面监听。。。的该销毁了
如果说想在created内获取dom元素，我们可以使用nextTick
页面和组件的生命周期执行顺序

页面---beforeCreate
 页面---created
 页面---beforeMount
 组件---beforeCreate
 组件---created
组件---beforeMount
 组件---mounted
 页面---mounted

页面跳转的时候生命周期的执行
先执行的是后一页面的创建和挂载前；然后原始页面销毁；新页面挂载