Vue2.0 探索之路——关于生命周期和钩子函数的一些理解

最新推荐文章于 2024-03-20 10:12:14 发布

极客范儿

最新推荐文章于 2024-03-20 10:12:14 发布

阅读量631

点赞数 1

分类专栏： ━═━═━◥ 前端 ◤━═━═━ Vue HTML5与CSS3实战主流前端框架实战文章标签： vue 2.0 钩子方法 lifecycle

本文链接：https://blog.csdn.net/Prototype___/article/details/80708576

版权

━═━═━◥ 前端 ◤━═━═━ 同时被 3 个专栏收录

23 篇文章 0 订阅

订阅专栏

HTML5与CSS3实战

20 篇文章 0 订阅

订阅专栏

Vue

7 篇文章 0 订阅

订阅专栏

一、前言

在毕业旅行中思考，在几个钩子函数里做一些事情，什么时候做，在哪个函数里做，不够甚解。网上大多是1.0的版本介绍，于是对vue2.0的生命周期做做文章。

二、vue生命周期简介

1.Vue在实例化一个组件的事后，会在特别的时期执行性相应的方法，这个方法，就叫做钩子方法。

2.Vue在实例化组件开始的时候，会按照顺序调用beforeCreated，created，beforeMounted，mounted方法。每个阶段组件内部的属性都是不一样的，比如created钩子时视图还没有渲染，就不能做一些dom操作。

3.一般来说，特定的钩子做特定的事。因为ajax是异步传输，ajax获取数据就可以在mounted阶段，也可以放在created，beforeMounted阶段。ajax之后的回调会放在事件队列的尾部，此时实例化组件整个过程会在ajax回调之前执行完毕。所以ajax操作放在created，mounted里面都是可以的。

lifecycle

vue 1.0+	vue 2.0	Description
Init	beforeCreate	组件实例刚被创建，组件属性计算值之前，如data属性等
created	created	组件实例创建完成，属性已绑定，但DOM还未完成，`&el`属性还不存在
beforeCompile	beforeMount	模板编译/挂载之前
compiled	mounted	模板编译/挂载之后
ready	mounted	模板编译/挂载之后（不保证组件已在document中）
-	beforeUpdate	组件更新之前
-	updated	组件更新之后
-	activivated	for `keep-alive`，组件被激活时调用
-	deactivivated	for `keep-alive`，组件被激活时调用
attached	-
deattached	-
beforeDestory	beforeDestory	组件销毁前调用
destory	destoryed	组件销毁后调用

三、生命周期探究

<!DOCTYPE html>
<html>
<head>
    <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 type="text/javascript">

  var app = new Vue({
      el: '#app',
      data: {
          message : "geekfanr is a bitman" 
      },
       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("%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('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); 
        },
        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>
</body>
</html>

create 和 mounted
beforecreated：el 和 data 并未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化
mounted ：完成挂载
update
单击页面中的“更新数据”按钮，将数据更新。下面就能看到data里的值被修改后，将会触发update的操作
destroy
销毁完成后，再重新改变message的值，vue不再对此动作进行响应了。但是原来生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。因为这个Vue实例已经不存在了

极客范儿

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue2.0 探索之路——关于生命周期和钩子函数的一些理解

一、前言在毕业旅行中思考，在几个钩子函数里做一些事情，什么时候做，在哪个函数里做，不够甚解。网上大多是1.0的版本介绍，于是对vue2.0的生命周期做做文章。二、vue生命周期简介1.Vue在实例化一个组件的事后，会在特别的时期执行性相应的方法，这个方法，就叫做钩子方法。 2.Vue在实例化组件开始的时候，会按照顺序调用beforeCreated，created，beforeMoun...
复制链接

扫一扫