vue组件生命周期钩子使用示例详解

2024-09-29 00:32:17

组件生命周期图

组件生命周期钩子

所有的生命周期钩子自动绑定

一、组件的生命周期：一个组件从创建到销毁的整个过程

二、生命周期钩子：在一个组件生命周期中，会有很多特殊的时间节点，且往往会在特定的时间节点完成一定的逻辑，特殊的事件节点可以绑定钩子

注：钩子 - 提前为某个事件绑定方法，当满足这个事件激活条件时，方法就会被调用 | 满足特点条件被回调的绑定方法就称之为钩子

<template>
    <div class="goods">
        <Nav />
    </div>
</template>
<script>
    import Nav from "../components/Nav";
    export default {
        name: "Goods",
        components: {
            Nav,
        },
        beforeCreate() {
            console.log('该组件要被加载了')
        },
        created() {
            console.log('该组件要被加载成功了')
        },
        updated() {
            console.log('数据更新了')
        },
        destroyed() {
            console.log('该组件销毁了')
        }
    }
</script>

1、beforeCreate

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

2、created

在实例创建完成后被立即调用.在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前尚不可用。

3、beforeMount

在挂载开始之前被调用

4、mounted

实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当mounted被调用时vm.$el也在文档内。

注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick：

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

5、beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

6、updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。

然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

7、activated

被 keep-alive 缓存的组件激活时调用。

该钩子在服务器端渲染期间不被调用。

8、deactivated

被 keep-alive 缓存的组件停用时调用。

该钩子在服务器端渲染期间不被调用。

9、beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

该钩子在服务器端渲染期间不被调用。

10、destroyed

实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

该钩子在服务器端渲染期间不被调用。

11、errorCaptured

2.5.0+ 新增
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。

此钩子可以返回 false 以阻止该错误继续向上传播

以上就是vue组件生命周期钩子使用示例详解的详细内容，更多关于vue组件生命周期钩子的资料请关注我们其它相关文章！

Vue生命周期中的组件化你知道吗

目录引出生命周期销毁流程生命周期生命周期总结组件化非单文件组件组件的几个注意点组件的嵌套 VueComponent Vue实例与组件实例总结引出生命周期此时调用change,定时器回调修改opacity,数据修改,模板重新解析,再次调用change. 销毁流程解绑(自定义)事件监听器生命周期生命周期总结 <div id="root"> <!-- <h2 :style="{opacity}">hello,{{n
Vue生命周期中的八个钩子函数相机

目录 1.beforeCreate和created函数 2.beforeMount和mounted函数 3.beforeUpdate和updated函数 4.beforeDestroy和destroyed函数总结 1.beforeCreate和created函数 beforeCreate和created以初始化:数据监测.数据代理为分界线. 在执行beforeCreate()之前,将初始化生命周期.时间,但数据代理还没有开始. (1)beforeCreate():在初始化数据监测.数据代理之前
Vue生命周期介绍和钩子函数详解

目录 Vue生命周期介绍和钩子函数 VUE生命周期钩子 Vue生命周期简介 create 和 mounted 相关 update 相关 destroy 相关总结 Vue生命周期介绍和钩子函数组件每个阶段它的内部构造是不一样的,所以一般特定的钩子做特定的事,比如Ajax获取数据就可以在mounted阶段.从Vue实例被创建开始到该实例最终被销毁的整个过程叫做VUE的生命周期,在这个生命周期内发生了下面的事情:从vue实例被创建开始,首先vue实例被创建,之后开始数据的初始化,编译模板,挂载do
vue中的生命周期及钩子函数

目录 1.什么是生命周期 2.vue 的生命周期 3.生命周期钩子函数 1.什么是生命周期 Vue 实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载 Dom.渲染 → 更新 → 渲染.卸载等一系列过程,我们称这是 Vue 的生命周期.通俗说就是 Vue 实例从创建到销毁的过程,就是生命周期. 在 Vue 的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册 js 方法,可以让我们用自己注册的 js 方法控制整个大局,在这些事件响应方法中的 this 直接指向的
vue组件生命周期钩子使用示例详解

目录组件生命周期图组件生命周期钩子 1.beforeCreate 2.created 3.beforeMount 4.mounted 5.beforeUpdate 6.updated 7.activated 8.deactivated 9.beforeDestroy 10.destroyed 11.errorCaptured 组件生命周期图组件生命周期钩子所有的生命周期钩子自动绑定一.组件的生命周期:一个组件从创建到销毁的整个过程二.生命周期钩子:在一个组件生命周期中,会有很多特殊的
使用VitePress搭建及部署vue组件库文档的示例详解

目录安装vitepress 目录结构文档首页配置导航栏配置侧边栏部署到GitHub Pages 每个组件库都有它们自己的文档.所以当我们开发完成我们自己的组件库必须也需要一个组件库文档.如果你还不了解如何搭建自己的组件库可以看这里->从零搭建Vue3组件库.看完这篇文章你就会发现原来搭建和部署一个组件库文档是那么的简单.当然部署也不需要你有自己的服务器,你只要有github即可.由于我们的组件库还没有完成,所以下面就以element-plus作为示例来搭建一个文档吧. 安装vitep
Vue组件实现卡片动画倒计时示例详解

目录前言需求拆解组件设计思路具体开发 animate-clock.vue animate-card 项目中使用后记前言最近有朋友在做投票的项目,里面有用到一个倒计时的组件,还想要个动画效果.cv大法浸染多年的我,首先想到的是直接找个现有的组件. 通过一通搜索,看上的只有一个 vue2-flip-countdown,但是当我要修改大小和颜色的时候发现改不了,从而直接把源码拉到项目里面,改起来也挺麻烦. 而且,在搜索大法运行几个周天以后,其实心理已经有了一个倒计时开发整体思路,便决定自
vue的生命周期钩子与父子组件的生命周期详解

目录 vue的生命周期钩子的介绍父子组件的生命周期加载渲染过程父组件更新过程子组件更新过程父子组件更新过程销毁过程代码示例 created和mounted的区别 vue的生命周期钩子的介绍 vue官网中提供的vue的生命周期钩子图 vue的生命周期可以分为8个阶段: 1.创建vue实例涉及的两个钩子 (1)beforeCreate:创建前,vue实例初始化之前调用. 此时的数据观察和事件配置都还没有准备好,而此时的实例中的data和el还是underfined状态,不可用的.Dom
vue组件生命周期详解

本文实例为大家分享了vue组件生命周期的具体代码,供大家参考,具体内容如下分为4个阶段: create/mount/update/destroy 每一个阶段都对应着有自己的处理函数 create: beforeCreate created 初始化 mount: beforeMount mounted 和挂载相关的处理 update: beforeUpdate updated 根据要更新的数据做逻辑判断 destroy:beforeDestroy destroyed 清理工作代码: <!do
Vue生命周期与setup深入详解

目录生命周期生命周期函数不同API的生命周期 setup介绍 1. 访问Props 2. setup上下文 3. 与渲染函数一起使用生命周期下图对比了vue3(左)和vue2(右)的生命周期:vue3将destoryed该名成了unmounted,相应的beforeDestory改成了beforeUnmounted.除此之外在组合式API中新增了个钩子函数:setup.它发生在beforeCreate之前. 先简单介绍下setup函数: setup() 钩子是在组件中使用组合式 API
Vue组件生命周期三个阶段全面总结讲解

目录组件生命周期创建阶段 beforeCreate阶段 created阶段 beforeMount阶段 mounted阶段运行阶段 beforeUpdate阶段 updated阶段销毁阶段 beforeDestroy阶段 destroyed阶段总结组件生命周期生命周期(Life Cycle)是指一个组件从创建 -> 运行 -> 销毁的整个阶段,强调的是一个时间段. 生命周期函数:是由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行. 创建阶段 before
一文搞懂Vue八大生命周期钩子函数

目录一.速识概念: 二.八大生命周期钩子函数: 三.结合代码了解: 1. beforeCreate: 2.created: 3.beforeMount: 4.mounted: 5.beforeUpdate: 6.updated: 7.beforeDestroy: 8.destroyed: 一.速识概念: 我们把一个对象从生成(new)到被销毁(destory)的过程,称为生命周期.而生命周期函数,就是在某个时刻会自动执行的函数. 按照官方的原话,就是每个 Vue 实例在被创建时都要经过一
Servlet方法生命周期及执行原理详解

目录快速入门创建JavaEE项目实现接口中的抽象方法执行执行原理 Servlet中的生命周期方法 1.被创建:执行init方法,只执行一次 2.提供服务:执行service方法,执行多次 3.被销毁:执行destroy方法,只执行一次 Servlet3.0 Servlet体系结构 GenericServlet HttpServlet Servlet相关配置快速入门创建JavaEE项目定义一个类,实现Servlet接口 public class ServletDemo1 imple
react 组件实现无缝轮播示例详解

目录正文无缝轮播实现思路构思使用时代码结构 Carousel组件 CarouselItem组件完善组件完成小圆点正文需求是做一个无缝轮播图,我说这不是有很多现成的轮子吗?后来了解到他有一个特殊的需求,他要求小圆点需要在轮播图外面,因为现在大部分插件都是将小圆点写在轮播图内部的,这对于不了解插件内部结构的小伙伴确实不知道如何修改. 很久没有写插件的我准备写一个插件(react) 无缝轮播无缝轮播从最后一张到第一张的过程中不会原路返回,它就像轮子似的,从结束到开始是无缝连接的,非常