Vue生命周期函数(详解)

这篇具有很好参考价值的文章主要介绍了Vue生命周期函数(详解)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

 生命周期图

生命周期函数

beforeCreate和created的区别

beforeCreate创建前应用场景

 created创建后应用场景

beforeMount和mounted的区别

 beforeMount挂载前应用场景

 mounted挂载后应用场景

 beforeUpdate和updated的区别

 beforeUpdate更新前应用场景

 updated更新后应用场景

 beforeDestroy和destroyed的区别

 beforeDestroy销毁前

 destroyed销毁后

总结


 生命周期图


Vue生命周期函数(详解),vue,vue.js,javascript,前端

 上图生命周期每个红色的钩子是一个阶段,可以在每个不同的阶段写合适的代码。

生命周期函数

生命周期分为四个对子,根据不同的情况使用不同的函数

其中beforeUpdate、updated能执行多次

beforeCreate、created 创建前、创建后
beforeMount、mounted 挂载前、挂载后
beforeUpdate、updated 更新前、更新后
beforeDestroy、destroyed 销毁前、销毁后

下面的四种应用场景用的统一HTML代码

<div id="app">
    {{myName}}
</div>

 

beforeCreate和created的区别

创建前、创建后

beforeCreate创建前应用场景

vue代码:

var app = new Vue({
        el: '#app',
        data() {
            return {
                myName:'abc',
            }
        },
        beforeCreate(){
            //获取body并输出测试
            var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
            console.log("created",this.myName,bodyDom);
        }
    });

浏览器输出结果:

beforeCreate中data的数据是没有被定义的,created后面是undefined并且{{myName}}还未被识别

Vue生命周期函数(详解),vue,vue.js,javascript,前端

 created创建后应用场景

vue代码:

var app = new Vue({
    el: '#app',
    data() {
        return {
            myName:'abc',
        }
    },
    created(){
        //获取body并输出测试
        var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
        console.log("created",this.myName,bodyDom);
    }
});

浏览器输出结果:

created主要做一些页面的数据的数据初始化工作,获取到了myName的值,但是后台显示的还是{{myName}}值还未被填上去

Vue生命周期函数(详解),vue,vue.js,javascript,前端

 

beforeMount和mounted的区别

挂载前、挂载后

 beforeMount挂载前应用场景

vue代码:

var app = new Vue({
    el: '#app',
    data() {
        return {
            myName:'abc',
        }
    },
    beforeMount(){
            //获取body并输出测试
            var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
            console.log("beforeMount",this.myName,bodyDom);
        },
    }
});

浏览器输出结果:

输出结果和created创建后一样,是在创建后挂载前,自我感觉没啥大用

Vue生命周期函数(详解),vue,vue.js,javascript,前端

 mounted挂载后应用场景

vue代码:

var app = new Vue({
    el: '#app',
    data() {
        return {
            myName:'abc',
        }
    },
    mounted(){
            //获取body并输出测试
            var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
            console.log("beforeMount",this.myName,bodyDom);
        },
    }
});

浏览器输出结果:

数据已经渲染到View中

Vue生命周期函数(详解),vue,vue.js,javascript,前端

 beforeUpdate和updated的区别

更新前、更新后;和其他三个不同可被重复执行

 beforeUpdate更新前应用场景

vue代码:

var app = new Vue({
    el: '#app',
    data() {
        return {
            myName:'abc',
        }
    },
    beforeUpdate(){
            //获取body并输出测试
            var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
            console.log("beforeMount",this.myName,bodyDom);
        },
    }
});

浏览器输出结果:

数据更新前,数据未改变

Vue生命周期函数(详解),vue,vue.js,javascript,前端

 updated更新后应用场景

vue代码:

var app = new Vue({
    el: '#app',
    data() {
        return {
            myName:'abc',
        }
    },
    updated(){
            //获取body并输出测试
            var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
            console.log("beforeMount",this.myName,bodyDom);
        },
    }
});

浏览器输出结果:

数据更新后,数据已改变

Vue生命周期函数(详解),vue,vue.js,javascript,前端

 beforeDestroy和destroyed的区别

销毁前、销毁后

 beforeDestroy销毁前

一般应用到的场景:

  • 清除定时器
  • 解绑自定义事件
  • 取消订阅、事件监听

没有具体代码演示

 destroyed销毁后

此钩子函数会在组件实例销毁之后执行,此时所有的组件包括子组件都被销毁了。

也没有具体代码演示

总结

几个生命周期函数各有各的特点,根据不同的业务,使用不同的生命周期函数来解决问题。文章来源地址https://www.toymoban.com/news/detail-640568.html

到了这里,关于Vue生命周期函数(详解)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 探索Vue生命周期钩子函数:从创生到销毁

    Vue这个引领前端开发潮流的框架,其优雅的响应式数据绑定和组件式开发方式,使得它备受瞩目。然而,Vue的魅力绝不仅限于此,它还赋予开发者一组神奇的生命周期钩子函数,能够在组件的各个成长阶段插入自定义代码。本文将带你进入Vue生命周期钩子函数的奇妙世界,一

    2024年02月11日
    浏览(37)
  • 【Vue3】2-11 : 生命周期钩子函数及原理分析

    一、组件生命周期概述 1.1 官方生命周期 1.2 钩子函数(回调函数) ▶  生命周期可划分为三个部分(- 表示执行循序): 二、实战:测试生命周期流程 >  代码  >  效果 每个组件在被创建时都要经过一系列的初始化过程 ——例如, 设置数据监听 编译模板 将实例挂载到

    2024年01月21日
    浏览(39)
  • Vue2技能树(3)-声明式渲染、指令大全、生命周期函数

    👍 点赞,你的认可是我创作的动力! ⭐️ 收藏,你的青睐是我努力的方向! ✏️ 评论,你的意见是我进步的财富! Vue2技能树(1)-介绍、导入使用、响应式数据绑定、组件化开发 vue2技能树(2)-模板语法、vue的工具链、渐进式框架 Vue2技能树(3)-声明式渲染、指令大全、生命周

    2024年02月07日
    浏览(49)
  • JavaScript函数变量的生命周期,自执行函数、闭包、反转数组案例及冒泡排序案例

    一、变量的生命周期 JavaScript 变量的生命期从它们被声明的时间开始。 局部变量会在函数运行以后被删除。 全局变量会在页面关闭后被删除。 二、自执行函数 执行函数通常都是定义之后立即执行,以后都不再会调用,所以声明时可以省略函数名,因此自执行函数又叫匿名函

    2024年02月06日
    浏览(46)
  • 微信小程序——生命周期,生命周期的分类,页面生命周期,生命周期函数的分类,应用的生命周期函数,页面的生命周期函数,wxs脚本概述

    生命周期( Life Cycle )是指一个对象从创建-运行-销毁的整个阶段,强调的是一个时间段。 例如: .张三出生,表示这个人生命周期的开始 .张三离世,表示这个人生命周期的结束 .中间张三的一生,就是张三的生命周期 我们可以把每个小程序运行的过程,也概括为生命周

    2024年02月01日
    浏览(59)
  • Vue.js 生命周期详解

    Vue.js 是一款流行的 JavaScript 框架,它采用了组件化的开发方式,使得前端开发更加简单和高效。在 Vue.js 的开发过程中,了解和理解 Vue 的生命周期非常重要。本文将详细介绍 Vue 生命周期的四个阶段:创建、挂载、更新和销毁。 在创建阶段,Vue 实例被创建并初始化。这个阶

    2024年02月13日
    浏览(40)
  • Ionic4 生命周期钩子函数和angular生命周期钩子函数介绍

    Ionic 4(以及之后的 Ionic 版本)使用了 Angular 生命周期钩子,因为 Ionic 是基于 Angular 构建的。因此,Ionic 4 中的生命周期与 Angular 组件生命周期非常相似。以下是一些常见的 Ionic 4 生命周期钩子: ionViewDidLoad : 在页面加载完成后触发。通常用于执行一次性的初始化任务。不推

    2024年02月07日
    浏览(50)
  • [Angular 基础] - 生命周期函数

    之前的笔记: [Angular 基础] - Angular 渲染过程 组件的创建 [Angular 基础] - 数据绑定(databinding) [Angular 基础] - 指令(directives) 以上为静态页面,即不涉及到跨组件交流的内容 以下涉及到组件内的沟通,从这开始数据就“活”了 [Angular 基础] - 自定义事件 自定义属性 [Angular 基础]

    2024年02月20日
    浏览(41)
  • react17:生命周期函数

    挂载时 更新时 setState触发更新、父组件重新渲染时触发更新 forceUpdate触发更新 卸载时 react(v17.0.2)的生命周期图谱如下。  相较于16版本,17版本生命周期函数有如下变化: componentWillMount() componentWillUpdate() componentWillReceiveProps() +getDerivedStateFromProps(props,state) +getSnapshotBeforeUp

    2024年02月11日
    浏览(45)
  • 生命周期函数和wxs脚本

    应用的生命周期函数:指小程序从启动 - 运行 - 销毁期间依次调用的那些函数。 小程序的应用生命周期函数需要在 app.js 中进行声明。 上面这张图就是从前台进入了后台。后台进入前台反之同理。 页面的生命周期函数:指小程序中,每个页面从加载 - 渲染 - 销毁期间依次调

    2024年02月16日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包