百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

vue:生命周期钩子函数及顺序(vue生命周期钩子函数作用)

ztj100 2025-03-30 00:20 69 浏览 0 评论

一、vue 的钩子相关顺序

Vue实例有一个完整的生命周期,在new Vue()后,会初始化数据,如下:

//初始化的入口,各种初始化工作
initMixin(Vue);
//数据绑定的核心方法,包括常用的$watch方法
stateMixin(Vue);
//事件的核心方法,包括常用的$on,$off,$emit方法
eventsMixin(Vue);
//生命周期的核心方法
lifecycleMixin(Vue);
//渲染的核心方法,用来生成render函数以及VNode
renderMixin(Vue);

在initMixin中,可以看出,对应的周期钩子操作顺序如下:

vm._self = vm;
initLifecycle(vm);
initEvents(vm); //初始化事件
initRender(vm);
callHook(vm, 'beforeCreate');
initInjections(vm); // resolve injections before data/props
initState(vm);
initProvide(vm); // resolve provide after data/props
callHook(vm, 'created');

故加载及销毁顺序如下:

加载页面执行步骤
1、父组件:beforeCreate -> created -> beforeMount
2、子组件:beforeCreate -> created -> beforeMount -> mounted
3、父组件:mounted
销毁组件执行步骤
1、父组件:beforeDestroy
2、子组件:beforeDestroy
3、子组件:destroyed
2、父组件:destroyed

二、vue的各个钩子能做哪些操作

beforeCreate:
在此阶段,实例刚在内存中被创建出来。此时,data的数据和methods中方法的都还没有初始化,数据和模板均获取不到
created:
在此阶段,实例已经在内存中创建完成。data 和 methods、computed都已经被初始化好了,如果要调用 methods 中的方法,或者操作 data 中的数据,最早可以在这个阶段中操作。此生命周期为最早可进行ajax异步数据请求的生命周期,服务端渲染也可在此进行
beforeMount:
执行到这个钩子的时候,在内存中已经编译好了模板了,相关的render函数首次被调用(虚拟DOM),但是还没有挂载到页面中,此时,页面还是旧的
mounted:
执行到这个钩子的时候,就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段,进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点,最早可以在和这个阶段中进行,mounted只会执行一次。
beforeUpdate:
当执行这个钩子时,页面中的显示的数据还是旧的,data中的数据是更新后的, 页面还没有和最新的数据保持同步,不会触发附加地重渲染过程
updated:
调用时,组件DOM已经更新,页面显示的数据和data中的数据已经保持同步了,都是最新的 。所以可以执行依赖于DOM的操作,然后在大多是情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环,该钩子在服务器端渲染期间不被调用
beforeDestory:
Vue实例从运行阶段进入到了销毁阶段,这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于可用状态。还没有真正被销毁,此时还是可以访问实例的属性

另外两个:
activated
  keep-alive组件激活时调用。
  该钩子在服务器端渲染期间不被调用。
deactivated
  keep-alive组件停用时调用。
  该钩子在服务端渲染期间不被调用。
activated()和deactivated()只有在包裹的时候才有效;

相关推荐

Linux集群自动化监控系统Zabbix集群搭建到实战

自动化监控系统...

systemd是什么如何使用_systemd/system

systemd是什么如何使用简介Systemd是一个在现代Linux发行版中广泛使用的系统和服务管理器。它负责启动系统并管理系统中运行的服务和进程。使用管理服务systemd可以用来启动、停止、...

Linux服务器日常巡检脚本分享_linux服务器监控脚本

Linux系统日常巡检脚本,巡检内容包含了,磁盘,...

7,MySQL管理员用户管理_mysql 管理员用户

一、首次设置密码1.初始化时设置(推荐)mysqld--initialize--user=mysql--datadir=/data/3306/data--basedir=/usr/local...

Python数据库编程教程:第 1 章 数据库基础与 Python 连接入门

1.1数据库的核心概念在开始Python数据库编程之前,我们需要先理解几个核心概念。数据库(Database)是按照数据结构来组织、存储和管理数据的仓库,它就像一个电子化的文件柜,能让我们高效...

Linux自定义开机自启动服务脚本_linux添加开机自启动脚本

设置WGCloud开机自动启动服务init.d目录下新建脚本在/etc/rc.d/init.d新建启动脚本wgcloudstart.sh,内容如下...

linux系统启动流程和服务管理,带你进去系统的世界

Linux启动流程Rhel6启动过程:开机自检bios-->MBR引导-->GRUB菜单-->加载内核-->init进程初始化Rhel7启动过程:开机自检BIOS-->M...

CentOS7系统如何修改主机名_centos更改主机名称

请关注本头条号,每天坚持更新原创干货技术文章。如需学习视频,请在微信搜索公众号“智传网优”直接开始自助视频学习1.前言本文将讲解CentOS7系统如何修改主机名。...

前端工程师需要熟悉的Linux服务器(SSH 终端操作)指令

在Linux服务器管理中,SSH(SecureShell)是远程操作的核心工具。以下是SSH终端操作的常用命令和技巧,涵盖连接、文件操作、系统管理等场景:一、SSH连接服务器1.基本连接...

Linux开机自启服务完全指南:3步搞定系统服务管理器配置

为什么需要配置开机自启?想象一下:电商服务器重启后,MySQL和Nginx没自动启动,整个网站瘫痪!这就是为什么开机自启是Linux运维的必备技能。自启服务能确保核心程序在系统启动时自动运行,避免人工...

Kubernetes 高可用(HA)集群部署指南

Kubernetes高可用(HA)集群部署指南本指南涵盖从概念理解、架构选择,到kubeadm高可用部署、生产优化、监控备份和运维的全流程,适用于希望搭建稳定、生产级Kubernetes集群...

Linux项目开发,你必须了解Systemd服务!

1.Systemd简介...

Linux系统systemd服务管理工具使用技巧

简介:在Linux系统里,systemd就像是所有进程的“源头”,它可是系统中PID值为1的进程哟。systemd其实是一堆工具的组合,它的作用可不止是启动操作系统这么简单,像后台服务...

Red Hat Enterprise Linux 10 安装 Kubernetes (K8s) 集群及高级管理

一、前言...

Linux下NetworkManager和network的和平共处

简介我们在使用CentoOS系统时偶尔会遇到配置都正确但network启动不了的问题,这问题经常是由NetworkManager引起的,关闭NetworkManage并取消开机启动network就能正...

取消回复欢迎 发表评论: