一文搞懂Vue八大生命周期钩子函数

2024-07-31 21:06:01

一.速识概念：

我们把一个对象从生成（new）到被销毁（destory）的过程，称为生命周期。而生命周期函数，就是在某个时刻会自动执行的函数。
按照官方的原话，就是每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
简单来说就是每个Vue实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等。Vue为生命周期中的每个状态都设置了钩子函数(监听函数) 。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

二.八大生命周期钩子函数：

函数	调用时间
beforeCreate	vue实例初始化之前调用
created	vue实例初始化之后调用
beforeMount	挂载到DOM树之前调用
mounted	挂载到DOM树之后调用
beforeUpdate	数据更新之前调用
updated	数据更新之后调用
beforeDestroy	vue实例销毁之前调用
destroyed	vue实例销毁之后调用

下面是官方文档里的生命周期图，英语好的同学可以看看：

三.结合代码了解：

先看案例基本代码如下，后面通过如下代码步骤演示一个对象从生成到被销毁的过程各阶段执行的生命周期函数。注意show函数的作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{information}}
    </div>
    <script type="text/javascript">
       //创建vue实例
       var vm = new Vue({
           el: '#app',
           data: {
               information: '北极光之夜。'
           }
       })
       // 各个生命周期函数通过调用下面这个函数了解其所处的生命阶段
       function show(inf,obj){
          console.log(inf);
          console.log("------------------------------------------");
          console.log('获取vue实例data里的数据:');
          console.log(obj.information);
          console.log("------------------------------------------");
          console.log('挂载的对象，就是DOM：');
          console.log(obj.$el);
          console.log("------------------------------------------");
          console.log('页面上已经挂载的DOM：');
          console.log(document.getElementById('app').innerHTML);
       }

    </script>

1. beforeCreate：

这个阶段vue实例刚刚在内存中创建，此时data和methods这些都没初始化好。
在案例中添加beforeCreate钩子函数：

 var vm = new Vue({
           el: '#app',
           data: {
               information: '北极光之夜。'
           },
           beforeCreate: function(){
             // 传入该阶段简介与this，this就是该阶段的vue实例
                  show('vue实例初始化之前',this);
           }
       })

看运行结果：

可以看到，此时vue实例刚刚在内存中创建，其它什么都undefined。

2.created：

这个阶段vue实例在内存中已经创建好了，data和methods也能够获取到了，但是模板还没编译。
在案例中添加created钩子函数：

 var vm = new Vue({
           el: '#app',
           data: {
               information: '北极光之夜。'
           },
           created: function(){
                  show('vue实例初始化之后',this);
           }
       })

看结果：

看到没，已经知道data里的数据了。其它的话都没。

3.beforeMount：

这个阶段完成了模板的编译，但是还没挂载到页面上。
在案例中添加钩子函数：

 var vm = new Vue({
           el: '#app',
           data: {
               information: '北极光之夜。'
           },
           beforeMount: function(){
             show('挂载之前',this);
           }
       })

看结果：

看到没，要挂载的对象都编译好了，但是页面的DOM树还没挂上去，这个阶段页面还没能显示出来。

4.mounted：

这个阶段，模板编译好了，也挂载到页面中了，页面也可以显示了。
在案例中添加钩子函数：

  var vm = new Vue({
           el: '#app',
           data: {
               information: '北极光之夜。'
           },
           mounted: function(){
            show('挂载之后',this);
           }
       })

看结果：

5.beforeUpdate:

转态更新之前执行此函数，此时data中数据的状态值已经更新为最新的，但是页面上显示的数据还是最原始的，还没有重新开始渲染DOM树。

先改变data里数据：

vm.information = '南极光之夜';

在案例中添加钩子函数：

 var vm = new Vue({
           el: '#app',
           data: {
               information: '北极光之夜。'
           },
          beforeUpdate: function(){
            show('更新之前',this);
           }
       })

看结果：

看到没，vue实例里的数据已经变成了南极光之夜。但是此阶段页面DOM节点上显示的还是初始的数据北极光之夜。

6.updated：

这个阶段是转态更新完成后执行此函数，此时data中数据的状态值是最新的，而且页面上显示的数据也是最新的，DOM节点已经被重新渲染了。

在案例中添加钩子函数：

  var vm = new Vue({
           el: '#app',
           data: {
               information: '北极光之夜。'
           },
          updated: function(){
            show('更新之后',this);
           }
       })

看运行结果：

更新了，全都更新了~

7.beforeDestroy：

beforeDestroy阶段处于vue实例被销毁之前，当然，这个阶段vue实例还能用。

销毁Vue实例：

vm.$destroy();

在案例中添加钩子函数：

 var vm = new Vue({
           el: '#app',
           data: {
               information: '北极光之夜。'
           },
          beforeDestroy: function() {
            show('销毁之前',this);
          }
       })

看效果：

8.destroyed：

这个阶段在vue实例销毁后调用，此时所有实例指示的所有东西都会解除绑定，事件监听器也都移除，子实例也被销毁。

在案例中添加钩子函数：

var vm = new Vue({
           el: '#app',
           data: {
               information: '北极光之夜。'
           },
          destroyed: function() {
            show('销毁之后',this);
          }
       })

看结果：

到此这篇关于一文搞懂Vue八大生命周期钩子函数的文章就介绍到这了,更多相关Vue八大生命周期钩子函数内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

聊聊vue生命周期钩子函数有哪些,分别什么时候触发

目录 vue生命周期钩子函数以下为详解版生命周期mounted和activated使用.踩坑 activated mounted 踩坑 vue生命周期钩子函数 vue生命周期即为一个组件从出生到死亡的一个完整周期主要包括以下4个阶段:创建,挂载,更新,销毁创建前:beforeCreate, 创建后:created 挂载前:beforeMount, 挂载后:mounted 更新前:beforeUpdate, 更新后:updated 销毁前:beforeDestroy, 销毁后:destro
vue中的生命周期及钩子函数

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

前言说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比较高频的考点,那么该如何回答这类问题,让人有眼前一亮的感觉呢... Vue-Router导航守卫: 有的时候,我们需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录. 为此我们有很多种方法可以植入路由的导航过程:全局的, 单
Vue3生命周期钩子函数详解

本文实例为大家分享了Vue3生命周期钩子函数的具体代码,供大家参考,具体内容如下一.Vue3生命周期钩子 setup() : 开始创建组件之前,在 beforeCreate 和 created 之前执行,创建的是 data 和 methodonBeforeMount() : 组件挂载到节点上之前执行的函数:onMounted() : 组件挂载完成后执行的函数:onBeforeUpdate(): 组件更新之前执行的函数:onUpdated(): 组件更新完成之后执行的函数:onBeforeUnm
Vue生命周期和钩子函数的详解与经典面试题

目录 1. vue生命周期 2.钩子函数 2.1 分为4大阶段8个方法: 2.2 初始化阶段 2.3 挂载阶段 2.4 更新阶段 2.5 销毁阶段面试题: 总结 1. vue生命周期一组件从创建到销毁的整个过程就是生命周期 Vue 实例从创建到销毁的过程,就是生命周期.也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列过程,我们称这是 Vue 的生命周期. 2.钩子函数 Vue 框架内置函数,随着组件的生命周期阶段,自动执行,特定的时间点,执行特定的操
一文搞懂Vue八大生命周期钩子函数

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

目录一.computed介绍 1.1.get 和 set 用法 1.2.计算属性缓存二.watch介绍三.两者区别 3.1.对于 computed 3.2.对于 watch 四.应用场景一.computed介绍 computed 用来监控自己定义的变量,该变量在 data 内没有声明,直接在 computed 里面定义,页面上可直接使用. //基础使用 {{msg}} <input v-model="name" /> //计算属性 computed:{ msg:fu
vue组件生命周期钩子使用示例详解

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

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

和旧的生命周期相比准备废弃三个钩子,已经新增了两个钩子 React16 之后有三个生命周期被废弃(但并没有删除) componentWillMount( 组件将要挂载的钩子) componentWillReceiveProps(组件将要接收一个新的参数时的钩子) componentWillUpdate(组件将要更新的钩子) 新版本的生命周期新增的钩子 getDerivedStateFromProps 通过参数可以获取新的属性和状态该函数是静态的该函数的返回值会覆盖掉组件状态 getSnap
React中useEffect与生命周期钩子函数的对应关系说明

目录 React useEffect与生命周期钩子函数的对应关系使用格式一:不带参数的情况使用格式二:带第二个参数,参数为空数组使用格式三:带第二个参数,并且指定了依赖项使用格式四:依赖项为空,没有具体的副作用函数.但是有副作用函数的清理函数. React函数式组件用useEffect模拟三个生命周期钩子函数 React useEffect与生命周期钩子函数的对应关系在React的函数组件中,useEffect的作用其实也对标了类组件中的生命周期,它的四种使用格式也与生命周期的四种钩子
Angular2生命周期钩子函数的详细介绍

Angular每个组件都存在一个生命周期,从创建,变更到销毁.Angular提供组件生命周期钩子,把这些关键时刻暴露出来,赋予在这些关键结点和组件进行交互的能力,掌握生命周期,可以让我们更好的开发Angular应用概述每个接口都有唯一的一个钩子方法,它们的名字是由接口名再加上ng前缀构成的.比如,OnInit接口的钩子方法叫做ngOnInit, Angular在创建组件后立刻调用它生命周期执行顺序 ngOnChanges 在有输入属性的情况下才会调用,该方法接受当前和上一属性值的Simpl
一文搞懂c++中的std::move函数

目录前言左值和右值左值引用右值引用 std::move函数 remove_reference源码剖析 std::forward源码剖析 std::move()源码剖析小结 std::move使用场景实例:vector::push_back使用std::move提高性能万能引用引用折叠完美转发前言在探讨c++11中的Move函数前,先介绍两个概念(左值和右值) 左值和右值首先区分左值和右值左值是表达式结束后依然存在的持久对象(代表一个在内存中占有确定位置的对象) 右值是表