vue的生命周期

2023-12-14 11:00:42

?

目录

?编辑

前言

创建阶段(Creation)

beforeCreate(创建前)

created(创建后)

beforeMount(挂载前)

mounted(挂载后)

更新阶段(Updating)

beforeUpdate(更新前)

updated(更新后)

销毁阶段(Destruction)

beforeDestroy(销毁前)

destroyed(销毁后)

例子

我的其他博客


前言

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

创建阶段(Creation)

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

更新阶段(Updating)

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

销毁阶段(Destruction)

  1. beforeDestroy(销毁前)
    • 在实例销毁之前调用。此时实例仍然完全可用。
  2. 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 实例生命周期各个阶段的钩子函数。在实际应用中,可以利用这些钩子函数执行一些初始化、清理、数据请求等操作

我的其他博客

Git命令大全:从基础到高级应用-CSDN博客

简单介绍一些其他的树-CSDN博客

什么是tomcat?tomcat是干什么用的?-CSDN博客

TCP/IP 四层体系结构-CSDN博客

Redis新数据类型-Bitmaps-CSDN博客

腾讯-轻量应用服务器centos7中宝塔安装MySQL8.0出现内存不足-CSDN博客Synchronized 优化-CSDN博客腾讯-轻量应用服务器centos7中宝塔安装MySQL8.0出现内存不足-CSDN博客

【计算机网络】URL概念及组成-CSDN博客

【计算机网络】TCP socket编程-CSDN博客

枚举类的final修饰-CSDN博客

什么是RabbitMQ-CSDN博客

文章来源:https://blog.csdn.net/AliceNo/article/details/134987129
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。