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 等” ,在不同的生命周期内会经历不同的钩子函数(生命周期 ...
随机推荐
- 03-body标签中相关标签
今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <fom> 一.列表标签 列表标签分为三种. 1 ...
- HTTP Status 405 - HTTP method POST is not supported by this URL
出现这个问题, 1.在servlet中没有调用post()方法引起的 2.在serlvet中跳转没有用外跳(response.sendRedirect()) 我的是因为第一种,是没有写dopost() ...
- MySQL 5.6版本内存占用过高的解决办法
最近在阿里云购买了一台云服务器,因为是自己测试玩的,所以配置按最低的来了,1G内存,然后啪啪啪(指键盘声音)的安装了JDK,Tomcat,MySQL(5.6)等一系列环境,开始很爽,然后噩梦开始了: ...
- Python基础【day03】：字典（一）
本节内容 简述 语法 字典的使用 字典内置方法 一.简述 字典是Python中的又一种数据结构,它是通过key-value的数据类型,跟我们小时候用的新华字典差不多,通过key去访问value 二.语 ...
- .Net MVC发布出错 Server Error in '/' Application.
发布的时候遇到这个错误:Server Error in '/' Application. Could not load file or assembly 'SettingsProviderNet' ...
- Hive记录-单机impala配置
1.先决条件配置了hadoop.hive等 2.官网查看版本信息下载相应的安装包 http://archive.cloudera.com/cdh5/redhat/5/x86_64/cdh/5.10/R ...
- servlet dispatcher .forward(request, response); 进入其它servlet【原】
dispatcher .forward(request, response); 进入其它servlet 假如我们的web.xml配置如下 <servlet> <servlet-nam ...
- oracle 递归和connect by【转】
oracle递归查询(单表包含多级上下级关系) http://www.cnblogs.com/walk-the-Line/p/4882866.html -- 查找所有第一层(包括)下的所有子节点 -- ...
- Pool多进程示例
利用Pool类多进程实现批量主机管理 #!/usr/bin/python # -*- coding: UTF-8 -*- # Author: standby # Time: 2017-03-02 # ...
- C# Dictionary序列化/反序列化
[Serializable] public class SerializableDictionary<TKey, TValue> : Dictionary<TKey, TValue& ...