Vue生命周期

最新推荐文章于 2024-09-10 20:30:17 发布

原创最新推荐文章于 2024-09-10 20:30:17 发布 · 248 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue生命周期 #钩子函数 #Vue

JS 同时被 3 个专栏收录

40 篇文章

订阅专栏

随记

31 篇文章

订阅专栏

Vue

6 篇文章

订阅专栏

先放一张官方文档图：

Vue 实例生命周期

钩子函数

从图中可以看到Vue生命周期中的几个钩子函数

Vue2.0生命周期钩子函数	描述
beforeCreate	组件实例刚被创建，$data、$el等都为undefined
created	组件实例创建完成，$data数据已经绑定，但$el尚未声明，为undefined
beforeMount	组件挂载之前，$el属性已经生成，其中DOM使用的data变量数据尚未被替换
mounted	组件挂载之后，$el属性已经生成，文档DOM中el元素被新创建的 $el 替换，并挂载到实例上去之后调用该钩子
beforeUpdate	组件更新之前，数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
updated	组件更新之后，组件 DOM 已经更新，此时可以操作更新后的DOM
activated	keep-alive 组件被激活时使用，会从缓存中读取组件状态
deactivated	keep-alive 组件停用时调用。
beforeDestroy	实例销毁之前
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

实例

以下实例来自详解vue生命周期

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue生命周期学习</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{message}}</h1>
    </div>
    <div id="test">{{test}}</div>
</body>
<script>
    let test = new Vue({
        el: '#test',
        data: {
            test: 'test'
        }
    })
    let app = new Vue({
        el: '#app',
        data: {
            message: 'Vue的生命周期'
        },
        beforeCreate: function () {
            console.group('------beforeCreate创建前状态------');
            console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
            console.log("%c%s", "color:red", "data   : " + this.$data); //undefined 
            console.log("%c%s", "color:red", "message: " + this.message)
        },
        created: function () {
            console.group('------created创建完毕状态------');
            console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
            console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化 
            console.log(this.$data)
            console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group('------beforeMount挂载前状态------');
            console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化  
            console.log("%c%s", "color:red", "message: " + this.message); //已被初始化  
        },
        mounted: function () {
            console.group('------mounted 挂载结束状态------');
            console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "message: " + this.message);
            console.log('beforeUpdate == ' + document.getElementsByTagName('h1')[0].innerHTML);
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "message: " + this.message);
            console.log('updated == ' + document.getElementsByTagName('h1')[0].innerHTML);
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "message: " + this.message);
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "message: " + this.message)
        }
    })
</script>

</html>

beforeCreate与created：