Vue入门和基础（二）

生命周期函数：
每个Vue实例被创建的时候都要经历一系列的初始化过程，这个过程就是Vue的生命周期

先上一张官图
Vue入门和基础（二）
其实官网上已经表明的很详细了，从图中我们可以看一个Vue实例的一整个生命周期中有很多个钩子函数，不用的钩子函数提供给我们在不同的时期进行操作，如图我们可以看出一共有八个这样的函数：

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

下面就是一一介绍：
先上一段代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue的初始化过程</title>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <h1>{{message}}</h1>
    </div>
    </body>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'This is a APP'
            },
            beforeCreate: function() {
                console.group('------beforeCreate创建前状态------');
                console.log("el     : " + this.$el); //undefined
                console.log("data   : " + this.$data); //undefined
                console.log("message: " + this.message)
            },
            created: function() {
                console.group('------created创建完毕状态------');
                console.log("el     : " + this.$el); //undefined
                console.log("data   : " + this.$data); //已被初始化
                console.log("message: " + this.message); //已被初始化
            },
           	beforeMount: function() {
       		 console.group('------beforeMount挂载前状态------');
        	console.log("el     : " + (this.$el)); //已被初始化
        	console.log(this.$el);
        	console.log("data   : " + this.$data); //已被初始化
        	console.log("message: " + this.message); //已被初始化
    },
    		mounted: function() {
        		console.group('------mounted 挂载结束状态------');
        		console.log("el     : " + this.$el); //已被初始化
        		console.log(this.$el);
        		console.log("data   : " + this.$data); //已被初始化
       	 		console.log("message: " + this.message); //已被初始化
    },
        })
    </script>
    </html>

运行代码在控制台查看得到结果：

Vue入门和基础（二）
我们可以看出在初始化之前，进行了数据的观测，而在created的时候 data已经进行了绑定。但是el还是undefined；
beforeMount - mounted：
这个时候对el是否存在进行了判断，如果存在就继续，如果不存在，Vue的生命周期在此处就结束了，el就是当前实例化挂载的dom节点。而在mounted之后，h1标签中的{{message}}变成了 This is a APP；
beforeUpdate - updated

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>vue的初始化过程</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{message}}</h1>
    <p>{{num}}</p>
    <button @click="add()">Add</button>
</div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'This is a APP',
            num:1,
        },
        methods:{
          add:function () {
              this.num++;
          }
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("el     : " + this.$el);
            console.log(this.$el);
            console.log("data   : " + this.$data);
            console.log("message: " + this.message);
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("el     : " + this.$el);
            console.log(this.$el);
            console.log("data   : " + this.$data);
            console.log("message: " + this.message);
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("el     : " + this.$el);
            console.log(this.$el);
            console.log("data   : " + this.$data);
            console.log("message: " + this.message);
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("el     : " + this.$el);
            console.log(this.$el);
            console.log("data   : " + this.$data);
            console.log("message: " + this.message)
        }
    })
</script>
</html>

运行上述代码并点击Add按钮控制台查看结果
Vue入门和基础（二）

这两个函数组件更新时触发。
beforeDestroy-destroyed：
beforeDestroy钩子函数在实例销毁之前调用。但是在此时，实例依然可以调用。
destroyed钩子函数在Vue 实例销毁后调用。整个实例被销毁。

Vue入门和基础（二）

Vue入门和基础（二）

相关推荐