vue的生命周期

简介: vue的生命周期



前言

Vue.js 是一款流行的 JavaScript 框架,用于构建用户界面。Vue 实例在其生命周期中经历不同的阶段,每个阶段都触发特定的钩子函数,使开发者能够在不同的时机执行自定义的逻辑。Vue 的生命周期可以分为创建阶段、更新阶段和销毁阶段。

创建阶段(Creation)

  1. beforeCreate(创建前)
  • 在实例初始化之后,数据观测(data observer)和事件配置之前被调用。
  • 此时实例还未初始化完成,无法访问数据和方法。
  1. created(创建后)
  • 在实例创建完成后立即调用。
  • 可以访问数据和方法,但是模板编译还未开始,DOM 元素还未挂载。
  1. beforeMount(挂载前)
  • 在挂载开始之前被调用:相关的 render 函数首次被调用。
  1. mounted(挂载后)
  • el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。
  • 可以访问到挂载后的 DOM 元素。

更新阶段(Updating)

  1. beforeUpdate(更新前)
  • 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
  1. updated(更新后)
  • 在数据更改导致的重新渲染和打补丁之后调用。
  • 可以访问更新后的 DOM 元素。

销毁阶段(Destruction)

  1. beforeDestroy(销毁前)
  • 在实例销毁之前调用。此时实例仍然完全可用。
  1. destroyed(销毁后)
  • 在实例销毁后调用。
  • 所有的事件监听器被移除,所有的子实例也被销毁。

例子

new Vue({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate: ', this.message);
  },
  created() {
    console.log('created: ', this.message);
  },
  beforeMount() {
    console.log('beforeMount: ', this.$el);
  },
  mounted() {
    console.log('mounted: ', this.$el);
  },
  beforeUpdate() {
    console.log('beforeUpdate: ', this.message);
  },
  updated() {
    console.log('updated: ', this.message);
  },
  beforeDestroy() {
    console.log('beforeDestroy: ', this.message);
  },
  destroyed() {
    console.log('destroyed: ', this.message);
  }
});

以上代码演示了 Vue 实例生命周期各个阶段的钩子函数。在实际应用中,可以利用这些钩子函数执行一些初始化、清理、数据请求等操作


相关文章
|
2天前
|
JavaScript 测试技术
vue不同环境打包环境变量处理
vue不同环境打包环境变量处理
13 0
|
2天前
|
JavaScript
vue中高精度小数问题(加减乘除方法封装)处理
vue中高精度小数问题(加减乘除方法封装)处理
10 0
|
2天前
|
JavaScript
vue项目使用可选链操作符编译报错问题
vue项目使用可选链操作符编译报错问题
6 0
|
2天前
|
JavaScript
Vue项目启动报错处理
Vue项目启动报错处理
6 1
|
2天前
|
JavaScript 定位技术
vue项目开发笔记记录(二)
vue项目开发笔记记录
28 0
|
2天前
|
JSON JavaScript API
vue项目开发笔记记录(一)
vue项目开发笔记记录
29 0
|
2天前
|
JavaScript
Vue-实现点击空白处隐藏某节点
Vue-实现点击空白处隐藏某节点
9 1
|
2天前
|
缓存 JavaScript 前端开发
vue项目实战:实战技巧总结(中)
vue项目实战:实战技巧总结
27 1
|
6天前
|
JavaScript 搜索推荐 测试技术
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
|
6天前
|
JavaScript
【vue】vue2 获取本地IP地址
【vue】vue2 获取本地IP地址
9 1