Vue生命周期深入分析总结

2024-12-01 08:51:21

一、生命周期图

官网图片，先了解一下流程

二、生命周期三个组成部分

第一节-初始化

beforeCreate

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

vue实例中的el，data，data中的message都为undefined。

created

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

主要应用：调用数据，调用方法，调用异步函数

beforeMount

载入前（完成了data和el数据初始化），可是页面中的内容仍是vue中的占位符，data中的message信息没有被挂在到Bom节点中，在这里能够在渲染前最后一次更改数据的机会，不会触发其余的钩子函数，通常能够在这里作初始数据。这个阶段操作DOM是不奏效的。

mounted

载入后html已经渲染(ajax请求能够放在这个函数中)，把vue实例中的data里的message挂载到BOM节点中去。

第二节-更新状态

beforeUpdate

状态完成更新之前（data中数据已发生变化，view层数据变化之前），后vue的虚拟dom机制会从新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比以后从新渲染。

updated

数据已经更改完成，dom也从新render完成。

第三节-销毁实例

Vm.$destroy()：销毁后自定义事件会失效，但原生DOM事件依然有效。销毁后会调用下面两个钩子。

beforeDestroy

销毁前执行（$destroy方法被调用的时候就会执行）,通常在这里善后:清除计时器、清除非指令绑定的事件等等…’)。

destroyed

销毁后（Dom元素存在，只是再也不受vue控制）,卸载watcher，事件监听，子组件

简单的对生命周期总结

常用的生命周期钩子

1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。

2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例

1.销毁后借助Vue开发者工具看不到任何信息。

2.销毁后自定义事件会失效，但原生DOM事件依然有效。

3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

三、代码测试生命周期

后面附有解释

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue实例的生命周期</title>
</head>
<body>
<div id="app">
  <h1>测试生命周期</h1>
  <div>{{msg}}</div>
  <hr>
  <h3>测试beforeUpdate和update两个钩子函数</h3>
  <button @click="handlerUpdate">更新数据</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      msg: "12345"
    },
    methods: {
      handlerUpdate() {
        this.msg=this.msg.split("").reverse().join("")
      }
    },
    //按照示意图依次调用
    beforeCreate(){
      console.log("调用了beforeCreate钩子函数");
    },
    created(){
      console.log("调用了created钩子函数");
    },
    beforeMount(){
      console.log('调用了beforeMount钩子函数');
    },
    mounted(){
      console.log('调用了mounted钩子函数');
    },
    beforeUpdate(){
      console.log("调用了beforeUpdate钩子函数")
    },
    updated(){
      console.log("调用了updated钩子函数");
    },
    beforeDestroy(){
      console.log("调用了beforeDestroy钩子函数");
    },
    destroyed(){
      console.log("调用了destroyed钩子函数");
    }
  })
</script>
</body>
</html>

初始化页面依次调用了：

调用了beforeCreate钩子函数
调用了created钩子函数
调用了beforeMount钩子函数
调用了mounted钩子函数

点击更新数据后：

12345变成了54321，此时调用了：

调用了beforeUpdate钩子函数
调用了updated钩子函数

打开F12控制台直接输入app.$destroy()主动销毁Vue实例调用：

调用了beforeDestroy钩子函数
调用了destroyed钩子函数

四、再探究

beforeCreate之前

初始化钩子函数和生命周期

beforeCreate和created钩子函数间的生命周期

在beforeCreate和created之间，进行数据观测(data observer) ，也就是在这个时候开始监控data中的数据变化了，同时初始化事件。

created钩子函数和beforeMount间的生命周期

对于created钩子函数和beforeMount有判断：

el选项对生命周期影响

1.有el选项

new Vue({
    el: '#app',
    beforeCreate: function () {
        console.log('调用了beforeCreat钩子函数')
    },
    created: function () {
        console.log('调用了created钩子函数')
    },
    beforeMount: function () {
        console.log('调用了beforeMount钩子函数')
    },
    mounted: function () {
        console.log('调用了mounted钩子函数')
    }
})

2.无el选项

new Vue({
    beforeCreate: function () {
        console.log('调用了beforeCreat钩子函数')
    },
    created: function () {
        console.log('调用了created钩子函数')
    },
    beforeMount: function () {
        console.log('调用了beforeMount钩子函数')
    },
    mounted: function () {
        console.log('调用了mounted钩子函数')
    }
})

证明没有el选项，则停止编译，也意味着暂时停止了生命周期。生命周期到created钩子函数就结束了。而当我们不加el选项，

但是手动执行vm.$mount(el)方法的话，也能够使暂停的生命周期进行下去，例如：

var app = new Vue({
    beforeCreate: function () {
        console.log('调用了beforeCreat钩子函数')
    },
    created: function () {
        console.log('调用了created钩子函数')
    },
    beforeMount: function () {
        console.log('调用了beforeMount钩子函数')
    },
    mounted: function () {
        console.log('调用了mounted钩子函数')
    }
})
app.$mount('#app')

template

同时使用template和HTML，查看优先级：

    <h1>测试template和HTML的优先级</h1>
    <div id="app">
        <p>HTML优先</p>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                msg:"template优先"
            },
            template:"<p>{{msg}}</p>",
        });
    </script>

结果：

结论

如果Vue实例对象中有template参数选项，则将其作为模板编译成render函数
如果没有template参数选项，则将外部的HTML作为模板编译（template），也就是说，template参数选项的优先级要比外部的HTML高
如果1,2条件都不具备，则报错

注意

Vue需要通过el去找对应的template，Vue实例通过el的参数，首先找自己有没有template，如果没有再去找外部的html，找到后将其编译成render函数。

也可以直接调用render选项，优先级：render函数选项 > template参数 > 外部HTML。

beforeMount和mounted钩子函数间的生命周期

beforeMount

载入前（完成了data和el数据初始化），但是页面中的内容还是vue中的占位符，data中的message信息没有被挂在到Dom节点中，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取。

Mount

载入后html已经渲染(ajax请求可以放在这个函数中)，把vue实例中的data里的message挂载到DOM节点中去

这里两个钩子函数间是载入数据。

beforeUpdate钩子函数和updated钩子函数间的生命周期

在Vue中，修改数据会导致重新渲染，依次调用beforeUpdate钩子函数和updated钩子函数

如果待修改的数据没有载入模板中，不会调用这里两个钩子函数

var app = new Vue({
    el: '#app',
    data: {
        msg: 1
    },
    template: '<div id="app"><p></p></div>',
    beforeUpdate: function () {
        console.log('调用了beforeUpdate钩子函数')
    },
    updated: function () {
        console.log('调用了updated钩子函数')
    }
})
app.msg = 2

如果绑定了数据，会调用两个钩子函数：

<h1>测试有数据绑定修改数据，钩子函数调用情况</h1>
<div id="app">
</div>
<script>
    var app = new Vue({
        el:"#app",
        template:"<p>{{msg}}</p>",
        data:{
            msg:"原数据"
        },
        beforeUpdate: function () {
            console.log("调用了beforeUpdate钩子函数")
        },
        updated: function () {
            console.log("调用了updated钩子函数");
        },
    });
    app.msg = "数据被修改了";
</script>

结果：

注意只有写入模板的数据才会被追踪

beforeDestroy和destroyed钩子函数间的生命周期

beforeDestroy

销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等…’)

destroyed

销毁后（Dom元素存在，只是不再受vue控制）,卸载watcher，事件监听，子组件

总结

beforecreate : 可以在这加个loading事件
created ：在这结束loading，还做一些初始数据的获取，实现函数自-执行
mounted ：在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestroy：你确认删除XX吗？
destroyed ：当前组件已被删除，清空相关内容

到此这篇关于Vue生命周期深入分析总结的文章就介绍到这了,更多相关Vue生命周期内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue生命周期函数调用详解

目录生命周期 Vue.mixin 生命周期选项合并调用生命周期函数结语生命周期 Vue为用户提供了许多生命周期钩子函数,可以让用户在组件运行的不同阶段书写自己的逻辑. 那么Vue内部到底是如何处理生命周期函数的呢?Vue的生命周期究竟是在代码运行的哪个阶段执行呢?本文将实现Vue生命周期相关代码的核心逻辑,从源码层面来理解生命周期. Vue.mixin 在介绍生命周期之前,我们先来看下Vue.mixin. Vue.mixin是Vue的全局混合器,它影响Vue创建的每一个实例,会将mixi
Vue生命周期与后端交互实现流程详解

目录表单控制购物车案例 v-model进阶(了解) vue生命周期与后端交互电影案例表单控制 1.input:checkbox(单选,多选),radio(单选) 2.代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="j
Vue生命周期实例分析总结

目录 1. 概述 2. 页面钩子函数 3. 生命周期函数 1. 概述每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如需要设置数据监听.编译模板.挂载实例到 DOM.在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码. 简单来说,生命周期钩子函数就是一堆回调函数,在我们创建实例时,这些回调函数按顺序执行. 2. 页面钩子函数名称作用 beforeCreate 在实例初始化之后,数据观测和事件配置之前
Vue生命周期深入分析总结

目录一.生命周期图二.生命周期三个组成部分第一节-初始化 beforeCreate created beforeMount mounted 第二节-更新状态 beforeUpdate updated 第三节-销毁实例 beforeDestroy destroyed 简单的对生命周期总结常用的生命周期钩子关于销毁Vue实例三.代码测试生命周期四.再探究总结一.生命周期图官网图片,先了解一下流程二.生命周期三个组成部分第一节-初始化 beforeCreate 初始化之后,数据
详解Vue生命周期的示例

一 vue的生命周期如下图所示(很清晰) 二 vue生命周期的栗子注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue生命周期</title> <script src="../js/vue.js"></script> &
深入理解Vue生命周期、手动挂载及挂载子组件

本文介绍了Vue生命周期和手动挂载,分享给大家,具体如下: 1.vue的生命周期: 2.$mount()手动挂载当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中: 假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载. 例如: 方法一: <div id="app"> {{name}} </div> <button onclick="test()">挂载</button> <scrip
vue生命周期与钩子函数简单示例

本文实例讲述了vue生命周期与钩子函数.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vue生命周期与钩子函数</title> <style> </style> <script src="https://
vue生命周期和react生命周期对比【推荐】

个人认为,react和vue的业务逻辑是差不多,vue在react上封装了更简洁的方法,使用起来更加的便捷,如:提供了便捷的指令(v-for,v-if,v-model),还提供了更多的属性(computed,watch),我还是比较喜欢用react的,更接近js原生,更容易于理解它. 一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁二 vue生命周期的栗子注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <h
浅谈Vuex注入Vue生命周期的过程

这篇文章是[前端词典]系列文章的第 13 篇文章,接下的 9 篇我会围绕着 Vue 展开,希望这 9 篇文章可以使大家加深对 Vue 的了解.当然这些文章的前提是默认你对 Vue 有一定的基础.如果一点基础都没有,建议先看官方文档. 第一篇文章我会结合 Vue 和 Vuex 的部分源码,来说明 Vuex 注入 Vue 生命周期的过程. 说到源码,其实没有想象的那么难.也和我们平时写业务代码差不多,都是方法的调用.但是源码的调用树会复杂很多. 为何使用 Vuex 使用 Vue 我们就不可避免的会遇
vue生命周期的探索

那么进入某个路由对应的组件的时候,我们会触发哪些类型的周期呢? 根实例的加载相关的生命周期(beforeCreate.created.beforeMount.mounted) 组件实例的加载相关的生命周期(beforeCreate.created.beforeMount.mounted) 全局路由勾子(router.beforeEach) 组件路由勾子(beforeRouteEnter) 组件路由勾子的next里的回调(beforeRouteEnter) 指令的周期(bind,inserted)
浅析Vue 生命周期

Vue 提供了11个钩子函数 1,从创建到销毁发生的一系列状态叫做什么周期,在这个过程中vue会提供状态函数给我们进行该状态的操作,这个函数叫做钩子函数/生命周期函数/生命周期钩子过程: new Vue({}) Vue 实例初始化,读取所有的生命周期函数,并没有执行,不会调用 beforeCreate() 读取属性,计算属性,添加监听 set get方法,读取watch方法 create() 可以操作数据了判断是否有el配置,或者是被调用了 $mount() 都会走下一步判断有没有el或
vue生命周期实例小结

本文实例分析了vue生命周期.分享给大家供大家参考,具体如下: 每个Vue实例都存在完整的生命周期,经历从创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程.如下图所示钩子函数 vue的完整生命周期可分为三个阶段:初始化阶段.运行阶段和销毁阶段.共存在很多钩子函数,他们在vue生命周期不同的阶段进行操作,列举如下: beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy de
Vue生命周期activated之返回上一页不重新请求数据操作

activated: 英文原意:使活动.触发在Vue的生命周期函数中,这个好像用的不是特别多?(也许只是在我的工作中这个用的不多,或者说叫几乎不用这个) 一.需求前不久在项目中有这样一个需求: 在订单页面的地址信息栏,默认通过接口填充了一个已经设置过的一个的默认地址,现在要跳转去地址列表重新选择一个地址并回填到订单页面的地址信息位置二.尝试常规操作: 我们通常会将通过接口请求数据的方法放在==created== 或者 ==mounted==这两个生命周期中的一个里面调用. 但是我们知道,