Vue2的生命周期

在Vue2中,生命周期钩子是在组件的生命周期中提供的函数,它们允许在特定的时刻执行代码。Vue2的生命周期可以分为四个主要的阶段:创建前/后、载入前/后、更新前/后、销毁前/后。

下面是Vue2生命周期的详解以及相关代码示例:

  1. beforeCreate:在实例初始化之后,数据观测(data observer)和事件/watcher 设置之前被调用。
  2. created:实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
  3. beforeMount:在挂载开始之前被调用。相关的 render 函数首次被调用。
  4. mounted:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用。
  5. beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
  6. updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
  7. beforeDestroy:实例销毁之前调用。此时实例仍然完全可用。
  8. destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑,所有的事件监听器会被移除,所有的子实例也会被销毁。

代码示例:




new Vue({
  data: {
    message: 'Hello Vue!'
  },
  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
最后修改于:2024年08月13日 09:05

评论已关闭

推荐阅读

Vue中使用mind-map实现在线思维导图
2024年08月04日
VUE
Web前端最全Vue实现免密登录跳转的方式_vue怎么样不登录返回首页,最强技术实现
2024年08月04日
VUE
vue3 项目搭建教程(基于create-vue,vite,Vite + Vue)
2024年08月04日
VUE
Vue-颜色选择器实现方案——>Vue-Color( 实战*1+ Demo*7)
2024年08月04日
VUE
Vue项目卡顿慢加载?这些优化技巧告诉你!_vue数据多渲染卡顿
2024年08月04日
VUE
vue中的keep-alive详解与应用场景
2024年08月04日
VUE
Vue、React实现excel导出功能(三种实现方式保姆级讲解)
2024年08月04日
vue-office/docx插件实现docx文件预览
2024年08月04日
VUE
java调用js文件的两种方法(支持V8引擎)
2024年08月04日
JavaScript:解决计算精度问题/mathjs/bignumber.js/big.js/decimal.js
2024年08月04日
两周从爬虫小白变大神 _yjs_js_security_passport
2024年08月04日
JS笔记(对象、函数、数组)
2024年08月04日
Markdown.js:强大的纯JavaScript Markdown解析器
2024年08月04日
Vue项目:js模拟点击a标签下载文件并重命名,URL文件地址下载方法、请求接口下载文件方法总结。
2024年08月04日
vue 父组件怎么获取子组件里面的data数据
2024年08月04日
VUE
个人开发实现AI套壳网站快速搭建(Vue+elementUI+SpringBoot)
2024年08月04日
el-table 表格封装并改造实现单元格可编辑
2024年08月04日
none
nodejs环境下创建vue项目、SSH密钥登陆!!!
2024年08月04日
vue+quill+element-ui实现视频、图片上传及缩放保姆级教程,轻松使用富文本
2024年08月04日
【three.js】22. Imported Models导入模型
2024年08月04日