跟着官档学 Vue.js (三) - 实例生命周期

实例生命周期

生命周期 这个词挺起来也是挺吓人的,在很多个编程领域都存在着这么一个说法。对于一个萌新来说,确实比较难懂。

举个例子就好理解多了,人的一生呐,就是从肚子里钻出来,然后度过童年,青年,中年,老年,然后再钻回肚子,哦不,是钻到土地下,这就是一个人的生命周期,从出生到死亡,有着很多个阶段。

人的生命周期

同样的,实例,一开始我们说了,需要被 构造 出来,紧接着他也会经历它生命中的各个阶段,然后死掉。

所以,要了解一个人,我们就要从他一生中的各个阶段去了解它,了解实例也一样!

进入童年就要上学,青年就要上班,中年就要。。也要上班,老年要退休。

所以说,每进入一个阶段都可以干一件什么事情。Vue 中也是这样的。所以 Vue 提供了一些称之为 钩子(HOOK) 的东西,为我们提供了机会去操作某个阶段的行为。

比如说 进入童年 就可以比喻为一个钩子,上学 就可以比喻为这个阶段要让他做的事情。

人的生命周期钩子

好了,回过头来再看一下官方的生命周期图:

我们在里面可以看到几个钩子:beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed

怎么用他们呢?我们可以把他们传入到构造器的 选项 里面,通过一个例子来了解以上的这些钩子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>learn Vue</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
<script>
    var app6 = new Vue({
        el: '#app-6',
        data: {
            message: 'Hello Vue!'
        },
        beforeCreate: function () {
            console.log("---------- beforeCreate ----------");
            console.log(this.message);
            console.log(this.$el);
        },
        created: function () {
            console.log("---------- created ----------");
            console.log(this.message);
            console.log(this.$el);
        },
        beforeMount: function () {
            console.log("---------- beforeMount ----------");
            console.log(this.message);
            console.log(this.$el);
        },
        mounted: function () {
            console.log("---------- mounted ----------");
            console.log(this.message);
            console.log(this.$el);
        },
        beforeUpdate: function () {
            console.log("---------- beforeUpdate ----------");
            console.log(this.message);
            console.log(this.$el);
        },
        updated: function () {
            console.log("---------- updated ----------");
            console.log(this.message);
            console.log(this.$el);
        },
        beforeDestroy: function () {
            console.log("---------- beforeDestroy ----------");
            console.log(this.message);
            console.log(this.$el);
        },
        destroyed: function () {
            console.log("---------- destroyed ----------");
            console.log(this.message);
            console.log(this.$el);
        },
    });
</script>
</body>
</html>

打开页面后,我们会在浏览器的后台看到这样的输出:

所以我们可以得出一些结论

  • beforeCreated : 在 vue 实例构造的第一步就触发这个钩子,什么数据都还没被绑定。

  • created : 数据已经被绑定之后触发这个钩子。

  • beforeMount : vue 已经绑定到元素身上,但是还没把数据同步给相应的元素。

(可以看到,dom中还是存在着我们的花括号语法,也就是还没把数据绑定上去)

  • mounted:vue 已经绑定到元素身上,并且数据已经同步到相应的元素身上了。

(看!花括号已经变成真的数据了!)

看完上面的例子应该就能很好地理解 生命周期钩子 这两个概念了。接下来我们继续对它进行一些操作,我们的页面中有一个输入框~我们接下来就更改一下输入框的内容,结果如下:

发现 dom 的内容并没有和 mount 类似有差别,反而两个钩子输出的内容是一样的。那区别在哪里呢?

有些时候可能在更新某个元素状态的时候需要做一些判断,那这些操作就必须写在 beforeUpdate 里面,因为这个时候虚拟 DOM 还没重新渲染。而 updated 是已经渲染完毕后才执行的,如果在 updated 中更改一个元素的状态,极有可能导致无限循环更新,所以需要注意。

默认情况下,vue 实例不会自己死掉,需要人为搞死他。

这里我们使用一个 实例方法$destroy,在控制台里面手动弄死这个实例。

  • beforeDestroy : 在老死之前还能控制那些被绑定的元素、数据和事件,做最后一刻的挣扎。

  • destroyed :死掉了,已经再也没办法控制之前绑定的元素了,所有的事件监听器都被移除了,如果有子实例的话,包括子实例的所有绑定也会被移除,再也没有响应式了。

  none