vue系列之生命周期
代码：
<body>
<div id="app">
{{message}}
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
var testVue = new Vue({
el: "#app",
data: {
message: "this is a message"
},
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>
在chrome运行：
beforeCreate
dom、data数据初始化之前
created
data数据初始化完成，dom没有初始化
beforeMount
dom初始化完成
mounted
data数据挂载到dom上
在浏览器中运行testVue.message="zhaobao";
在浏览器中运行testVue.$destroy();
参考地址：https://segmentfault.com/a/1190000008010666
vue系列之生命周期的更多相关文章
- Vue.js-07：第七章 - Vue 实例的生命周期
一.前言 在之前的 Vue 学习中,我们在使用 Vue 时,都会创建一个 Vue 的实例,而每个 Vue 实例在被创建时都要经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 D ...
- 从零开始学 Web 之 Vue.js（三）Vue实例的生命周期
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Vue js 的生命周期详解
Vue 实例的生命周期 Vue 实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列 过程,我们称这是 Vue 的生命周期.通俗说就是 Vue ...
- Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖
1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...
- vue组件的生命周期
先来张组件生命周期的示意图: 文档里是这样描述的:你不需要立马弄明白所有的东西,不过以后它会有帮助.传送门. Vue2.0的生命周期钩子一共有10个,同样结合官方文档作出了下表 生命周期钩子 详细 b ...
- vue实例的生命周期
Vue实例的生命周期也就是这个实例从出生到死亡的过程,所以我在文档原图上把这个周期大致分为创建过程 | 运行过程 | 销毁过程三个阶段,不同结果或又分为一些小的阶段 在第一个阶段,创建阶段,会完成Vu ...
- vue 项目实战 (生命周期钩子)
开篇先来一张图 下图是官方展示的生命周期图 Vue实例的生命周期钩子函数(8个) 1. beforeCreate 刚 new了一个组件,无法访问到数据和真实的do ...
- vue学习之生命周期和钩子函数
参考文章:Vue2.0 探索之路——生命周期和钩子函数的一些理解 抛出问题: 我们有时候会在几个钩子函数里做一些事情,那么什么时候做,该在哪个函数里做? 生命周期简介 结合代码看el 和 data以及 ...
- 浅析vue实例的生命周期（生命周期钩子）
“每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等” ,在不同的生命周期内会经历不同的钩子函数(生命周期 ...
随机推荐
- 【更新】搭建 Zookeeper-3.4.11 集群
先准备好三台linux(虚拟机). 1. 先把Java环境配好.我CentOS-7-x86_64-DVD-1708 + jdk1.8.0_161 1.1 先把jdk上传到系统里面(我利用的Filezi ...
- C++ 栈和队列的使用
要使用标准库的栈和队列,首先得添加头文件 #include <stack> #include<queue> 定义栈: stack<int> curStack; 定 ...
- Java面向对象----个人参考资料
Java面向对象 :什么是面向对象.类与对象.封装.构造方法.static关键字.继承.抽象类.接口.多态 一.什么是面向对象 1.面向过程思想 面向过程:(PO,Procedure Oriented ...
- MySQL_DDL(不定时更新)
1. //1.创建数据库,并指定字符集为utf8 create database rocker_oa default character set utf8; //2.创建用户,并指定密码为‘root’ ...
- VBScript入门篇
VBScript入门篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.定义一个过程 定义一个过程:可以将相同的操作的代码提取出来,方便其他人来调用这段代码,可以减少你的代码的重 ...
- xen 配置vm 跟随xen server一起启动
查看Xen Server 信息 (1)查看pool信息 [root@xenserver-243 ~]# xe pool-list uuid ( RO) : e29037aa-0dca-f95a-193 ...
- 《超哥带你学Linux》
前言 “Linux?听说是一个操作系统,好用吗?” “我也不知道呀,和windows有什么区别?我能在Linux上玩LOL吗” “别提了,我用过Linux,就是黑乎乎一个屏幕,鼠标也不能用,不停地的敲 ...
- IdeaVim-常用操作
IdeaVim简介 IdeaVim是IntelliJ IDEA的一款插件,他提高了我们写代码的速度,对代码的跳转,查找也很友好. 安装位置 安装之后它在 Tools > Vim Emulator ...
- 51NOD-1486 大大走格子
有一个h行w列的棋盘,里面有一些格子是不能走的,现在要求从左上角走到右下角的方案数. Input 单组测试数据. 第一行有三个整数h, w, n(1 ≤ h, w ≤ 10^5, 1 ≤ n ≤ 20 ...
- I2C和SPI总线对比
1 iic总线不是全双工,2根线SCL SDA.spi总线实现全双工,4根线SCK CS MOSI MISO 2 iic总线是多主机总线,通过SDA上的地址信息来锁定从设备.spi总线只有一个主设备, ...