说些题外话,引出vue的生命周期。

比如人出生到寿终正寝,这是人的一个生命周期。他会经历出生,婴儿时期,童年时期,少年时期,青年,中年,老年,到 end。然后,每个时期都会有一定的历史任务在等着去完成,比如童年的时候,我们要学会基本的说话走路等,少年时期要完成一定量的识字识数等,青年要参与社会工作等,老年养老等。最重要的时期就是在青年和中年的时期,因为这个时期我们要实现个人的历史价值,完成一定的社会任务等。vue实例的时候,也是经历一定的生命周期,这个生命周期会有对应的钩子函数。好了,下面就是我自己对生命周期的理解。

这个图是vue 官网的一张解释生命周期的一张图,我们将会根据这个图来做下demo理解, Provide the img of vue's  lifecircle.

 var app = new Vue({
el: '#app',
data: {
message : "vue life-circle" ,
},
beforeCreate: function () {
console.log('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.log('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.log('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.log('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); //已被初始化 this.message = 'message is change'; // 在mounted 改变数据 触发下面的beforeUpdate的方法
},
beforeUpdate: function () {
console.log('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); this.message = 'message is change';
console.log('change', this.message)
},
updated: function () {
console.log('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.log('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);
this.message = 'message change again';
console.log('change', this.message) },
destroyed: function () {
console.log('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)
console.log('change again', this.message) }
})
destroyed 的两个方法 需要在控制台里面 调用, app.destroyed() 
《未完,待续。。。》 参考文章: https://segmentfault.com/a/1190000008010666

我理解的vue生命周期的更多相关文章

  1. vue生命周期的理解

    我从官网上下载了一张vue生命周期的图,接下来实际分析一波vue到底执行了什么东西. 1.我们在使用vue时必不可少的操作就是 var vm = new Vue({}),这样我们就创建了一个vue的实 ...

  2. 详解vue生命周期

    vue生命周期 @(vue)[生命周期] 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周 ...

  3. Vue生命周期,面试常见问题

    一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数 ...

  4. 【Vue笔记】-- 详解vue生命周期

    针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...

  5. 面试题之(vue生命周期)

    在面试的时候,vue生命周期被考察的很频繁. 什么是vue生命周期呢? Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这 ...

  6. vue生命周期图示中英文版Vue实例生命周期钩子

    vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...

  7. vue生命周期钩子

    转载自:https://segmentfault.com/a/1190000008010666?utm_source=tag-newest https://segmentfault.com/a/119 ...

  8. 理解mpvue的生命周期

    mpvue是美团基于vue开发的一个开发小程序的框架,从而以vue的语法来开发小程序.在生命周期上,mpvue同时支持了vue的生命周期和小程序的生命周期,这可能让新上手的同学费解.这篇文章就来讲讲m ...

  9. VUE自定义指令生命周期,VUE生命周期

    一.自定义指令的生命周期 自定义指令有五个生命周期(也叫钩子函数),分别是 bind,inserted,update,componentUpdated,unbind bind:只调用一次,指令第一次绑 ...

随机推荐

  1. canvas加载图片需要二次刷新的问题

    如题:此问题我也经在百度问问上进行了解答.https://zhidao.baidu.com/question/1048045241465845579.html 好吧,难怪现在百度那么坑人,理论水军专家 ...

  2. Linux日志痕迹清除

    #coding=utf-8 import os import sys import subprocess def Clear_The_Log(host): logs = ["/var/log ...

  3. 安装Rational Rose后提示java.lang.ClassNotFoundException

    1. 在运行中输入regedit回车,打开注册表编辑器2. 搜索 TrustedClasspath [REG_SZ] ,因为64位和32位不一样. 4.添加值c:\windows\java\trust ...

  4. 局域网内ping [局域网内ip地址]命令详解

    一.工作过程 主机A向主机B发送一个ICMP请求报文[类型字段为8,代码字段为0],若收到ICMP回复报 文[类型字段为0,代码字段为0]则说明主机B处于活动状态:若超时未收到回复,则可能是 因为(1 ...

  5. 10 Tips for Writing Better Code (阅读理解)

    出发点 http://www.tuicool.com/articles/A7VrE33 阅读中文版本<编写质优代码的十个技巧>,对于我编码十年的经验,也有相同感受, 太多的坑趟过,太多的经 ...

  6. python函数后面有多个括号怎么理解?

    一般而言,函数后面只有一个括号.如果看见括号后还有一个括号,说明第一个函数返回了一个函数,如果后面还有括号,说明前面那个也返回了一个函数.以此类推. 比如fun()() def fun(): prin ...

  7. 第21月第6天 zhihu如何用3个月零基础入门机器学习

    1. 我们应该记住,既成的事实一定有它的道理,如果我们不能理解它,恐怕得从自身找原因.如果你交易股票,请记住,如果预测和市场不一致,错的是预测,而不是市场 https://www.cnblogs.co ...

  8. windows基本命令大全

    1.DOS常用命令详解 dir 列文件名 deltree 删除目录树 cls 清屏 cd 改变当前目录. copy 拷贝文件 diskcopy 复制磁盘 del 删除文件 format 格式化磁盘. ...

  9. 【译】第十篇 SQL Server安全行级安全

    本篇文章是SQL Server安全系列的第十篇,详细内容请参考原文. 不像一些其他industrial-strength数据库服务,SQL Server缺乏一个内置保护个别数据记录的机制,称为行级安全 ...

  10. linux学习记录.6.vscode调试c makefile

    参考 https://www.cnblogs.com/lidabo/p/5888997.html task有更新,不能使用文章的代码. 多文件 终端 touch main.c hw.c hw.h vs ...