Vue 2.0 浅谈--生命周期和钩子函数

Vue.js   2017-06-07 08:20:26 发布
您的评价:
     
5.0
收藏     3收藏
文件夹
标签
(多个标签用逗号分隔)

前言

用Vue也有一段时间了,发现生命周期是很重要的一部分,稍微懂得了一些东西,特地来分享一下.

生命周期和钩子函数-介绍

啥也不说先上图

图-1为 Vue 1.0 生命周期图,图-2为 Vue 2.0 生命周期图,图-3为Vue 1.0 和 Vue 2.0 钩子函数比较

重点看 Vue 2.0

生命周期和钩子函数-具体

上代码

自己粘走执行

<!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 : "xuxiao is boy" 
      },
       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>

打开F12可以查看生命周期各个时期的钩子函数的状态,如下图

由上图知:

1.beforeCrete: 此时,$el和data都为undefined,没有初始化

2.created: 创建后data初始化了,而$el没有

3.brforeMount: 挂在之前,$el和data都初始化了

4.mounted: Vue实例挂载完成了

注意: beforeMount红色矩形框里是{{message}},mounted的红矩形框里是xuxiao is boy,说明挂载前$el的值为'虚拟'的元素节点,挂载后'虚拟'的Dom节点被真实的Dom节点替换

数据更新(update)

在控制台里输入app.message = '数据更新'后

如下图

由此可见,当data数据变化时只会触发update

Vue实例解耦(destroy)

在控制台里输入app.$destroy();

如下图

由图知:

执行完destroy操作后,data里的数据没有变化,但是Dom结构还存在,也就是Vue实例不再受控制了,完成了解耦

生命周期和钩子函数-总结

如下图

这是把官方 Vue 2.0 生命周期的图例简化后的

生命周期钩子函数使用

beforecreate : 举个栗子:可以在这加个loading事件

created :在这结束loading,还做一些初始化,实现函数自执行

mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情

beforeDestory: 你确认删除XX吗? destoryed :当前组件已被删除,清空相关内容

 

来自:https://segmentfault.com/a/1190000009677699

 

扩展阅读

Vue.JS入门篇--自定义指令
Vue.js 源码学习笔记
使用YEOMAN创建属于自己的前端工作流
Vue.js 快速入门
前端开发工具vue.js开发实践总结

为您推荐

使用 HTTP 上传 G 级的文件之 Node.js 版本
Go语言(golang)开源项目大全
Vue.JS入门篇--自定义指令
给 JavaScript 初心者的 ES2015 实战
Express入门教程:一个简单的博客

更多

Vue.js
Vue.js开发
相关文档  — 更多
相关经验  — 更多
相关讨论  — 更多