关于Vue生命周期和钩子函数的小理解

最新推荐文章于 2022-07-08 22:52:43 发布

weixin_36897085

最新推荐文章于 2022-07-08 22:52:43 发布

阅读量381

点赞数 1

文章标签： Vue.js cycle

本文链接：https://blog.csdn.net/weixin_36897085/article/details/79639343

版权

Vue.js是什么？

官网上是这么介绍的： Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，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>生命周期钩子函数</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>
    
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: "Cherry is a beautiful girl!"
            },
            beforeCreate: function () {
                console.group('beforeCreated 创建前状态==========');
                console.log("%c%s", "color:red", "el : " + this.$el );
                console.log("%c%s", "color:red", "data :" + this.$data);
                console.log("%c%s", "color:red", "message :" + this.message);
            },
            created: function () {
                console.group('created 创建完毕状态===============');
                console.log("%c%s", "color:red", "el : " + this.$el );
                console.log("%c%s", "color:red", "data :" + 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);
            },
            updated: function () {
                console.group('update 更新完成状态==================');
                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);
            },
            beforeDestroy: function () {
                console.group('beforeDestory 销毁前状态=================');
                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", "clor:red", "message :" + this.$message);
            },
            destroyed: function () {
                console.group('destroyed 销毁完成状态=================');
                console.log("%c%s", "color:red", "el :" + this.$el);
                console.log("%c%s", "color:red", "data :" + this.$data);
                console.log("%c%s", "color:red", "message" +this.message);
            }
        })
    </script>
</body>
</html>

打开控制台看输出了什么？

首先页面显示了Cherry is a good girl!

分析下结果：

在beforeCreate创建前状态时，$el、$data和message的值都为undefined；

在created创建完成状态时，$data和message初始化完成，message的值为'Cherry is a good girl!';

在beforeMount挂载状态时，$el、$data、message均完成了初始化；注意看第一处红色框选内容，此处就是Virtual DOM,先留出一个地方，然后在后面进行渲染。

在mounted挂载完成状态时，message的值便为'Cherry is a good girl!';

接着我们来更改下message的值。

执行app.message = " I'm a good girl ! " 结果如下：

相应的页面内容也更改为' I'm a good girl ! '

最后我们来执行app.$destroy();

此时，我们再次更改app.message的值，发现message的值不会再被更改了。如图，message的值仍为' I'm a good girl ! '

以上说明一旦销毁完成后，我们再更改message的值，Vue将不会做出动态响应。

最后我想说

此时，我们再回头看看生命周期的图示，是不是瞬间就觉得清晰了很多呢~

参考文献：https://segmentfault.com/q/1010000007704114?_ea=1431323

weixin_36897085

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
关于Vue生命周期和钩子函数的小理解

Vue.js是什么？官网上是这么介绍的： Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。前言：最近一直在看Vue，不...
复制链接

扫一扫