生命周期钩子函数

beforeCreate：实例刚被创建出来，data 数据和 methods 方法还未被初始化，不能访问。用于初始化变量。
created：可以访问 data 数据和 methods 方法，不能访问 DOM 节点。用于 ajax 和页面初始化。
beforeMount：虚拟 DOM 已经创建，但是还未挂载到真实节点，可以在挂载之前更改数据。
mounted：可以访问 DOM 节点。
beforeUpdate：状态更新之前执行，页面还未渲染。
updated：页面渲染更新完成。
beforeDestroy：实例摧毁前调用，这时还可以使用实例。
destroyed：实例摧毁后调用。
activated：该钩子在服务器端渲染期间不被调用，在 DOM 节点挂载后和数据更新前调用。运用了组件缓存时，如果想每次切换都发送一次请求的话，需要把请求函数写在activated中，如果写在 created 或 mounted 中就只会在首次加载该组件时调用。
deactivated：keep-alive组件停用时调用。

其中 activated 和 deactivated 是独有的钩子函数。也就是只有使用了 keep-alive 组件后才会有。包裹的动态组件会被缓存，它是一个抽象组件，它自身不会渲染一个dom元素，也不会出现在父组件链中。当组件在内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

当使用了，页面初始化时，生命周期的执行顺序为 created -> mounted -> activated，退出或关闭页面时触发 deactivated。当再次进入（前进或者后退）时，只触发 activated。

只执行一次的事件放在 mounted 中；每次进入页面都要执行的事件放在 activated 中。

父组件与子组件执行顺序

渲染过程
子组件挂载完成后，父组件才挂载，所以挂载顺序是：
父组件 beforeCreate -> 父组件 created -> 父组件 beforeMount -> 子组件 beforeCreate -> 子组件 created -> 子组件 beforeMount -> 子组件 mounted -> 父组件 mounted

子组件更新过程
影响到父组件的顺序为：
父组件 beforeUpdate -> 子组件 beforeUpdate -> 子组件 updated -> 父组件 updated

不影响到父组件的顺序为：
子组件 beforeUpdate -> 子组件 updated

父组件更新过程
影响到子组件的顺序为：
父组件 beforeUpdate -> 子组件 beforeUpdate -> 子组件 updated -> 父组件 updated

不影响到子组件的顺序为：
父组件 beforeUpdate -> 父组件 updated

销毁过程
父组件 beforeDestroy -> 子组件 beforeDestroy -> 子组件 destroyed -> 父组件 destroyed

实战 Vue 之生命周期钩子函数执行顺序相关推荐

vue createApp()，mount()，生命周期钩子函数执行顺序
之前一直以为在调用createApp()时执行beforeCreate.created这两个钩子函数,在mount()时才执行beforeMount.mounted这两个钩子函数但实际上,在crea ...
详解Vue八大生命周期钩子函数
摘要:Vue为生命周期中的每个状态都设置了钩子函数(监听函数) .每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用. 本文分享自华为云社区<一文带你弄懂Vue八大生命周期钩子函数&g ...
不来看看这些 VUE 的生命周期钩子函数？ | 原力计划
作者 | huangfuyk 责编 | 王晓曼出品 | CSDN 博客 VUE的生命周期钩子函数:就是指在一个组件从创建到销毁的过程自动执行的函数,包含组件的变化.可以分为:创建.挂载.更新.销毁四 ...
Vue的生命周期钩子函数介绍
感谢内容提供者:金牛区吴迪软件开发工作室 Vue的生命周期钩子函数介绍 vue生命周期共分为四个阶段一:实例创建二:DOM渲染三:数据更新四:销毁实例共有八个基本钩子函数 1.beforeC ...
Vue的生命周期钩子函数
Vue的生命周期钩子函数一.Vue的生命周期共分为四个阶段 1.创建实例 2.DOM渲染 3.数据更新 4.销毁实例二.共有八个基本钩子函数 1.beforeCreate -创建前触发的行为:V ...
教女朋友学习 vue的生命周期钩子函数
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法感兴 ...
vue的生命周期钩子函数的作用
之前在大学学习Java的时候笔试题的第一道题经常是你是怎么理解生命周期的在vue的生命周期却又与Java不同的一个java类的完整的生命周期会经历加载.连接.初始化.使用.和卸载五个阶段: 而v ...
VUE页面生命周期钩子函数
预备知识: 1.vue的生命周期生命周期函数,又叫钩子函数生命周期钩子===生命周期函数===生命周期事件 2. 什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据. ...
vue的组件/data的参数/组件传值/插槽/侦听器/生命周期钩子函数
目录组件结构组件的命名规则: 组件的data参数 <font color='red'> 组件的父子传值prop(通信) <font color='red'>组件的子--&g ...

实战 Vue 之生命周期钩子函数执行顺序

实战 Vue 之生命周期钩子函数执行顺序

生命周期钩子函数

父组件与子组件执行顺序

实战 Vue 之生命周期钩子函数执行顺序相关推荐

最新文章

热门文章