vue2.0组件的生命周期
beforeCreate(){
console.log(new Date().getTime())
let data = this.text;
console.log('组件创立之前')
console.log('beforeCreate', data ? "数据获取成功" : '数据获取失败');
console.log('beforeCreate', $('.study').length ? "dom获取成功" : 'dom获取失败');
},
created(){
console.log(new Date().getTime())
console.log('组件实例创建完成')
let data = this.text;
console.log('created', data ? "数据获取成功" : '数据获取失败');
console.log('created', $('.study').length ? " dom获取成功" : 'dom获取失败');
//初次加载时不在 数据改变再次渲染是dom存在
},
beforeMount(){
console.log(new Date().getTime())
console.log('组件编译挂载之前')
let data = this.text;
console.log('beforeMount', data ? "数据获取成功" : '数据获取失败');
console.log('beforeMount', $('.study').length ? "dom获取成功" : 'dom获取失败');
// console.log($ele.demo) },
mounted(){
console.log(new Date().getTime())
console.log('组件编译挂载之后')
let data = this.text;
console.log('mounted', data ? "数据获取成功" : '数据获取失败');
console.log('mounted', $('.study').length ? "dom获取成功" : 'dom获取失败'); },
beforeUpdate(){
console.log(new Date().getTime())
console.log('组件更新之前')
let data = this.text;
console.log('beforeUpdate', data ? "数据获取成功" : '数据获取失败');
console.log('beforeUpdate', $('.study').length ? "dom获取成功" : 'dom获取失败');
},
updated(){
console.log(new Date().getTime())
console.log('组件更新之后')
let data = this.text;
console.log('updated', data ? "数据获取成功" : '数据获取失败');
console.log('updated', $('.study').length ? "dom获取成功" : 'dom获取失败');
},
activated(){
// 跳路由的时候
/*写于当前组件内*/
console.log('组件激活时调用')
},
deactivated(){
console.log('组件被移除时调用')
},
vue2.0组件的生命周期的更多相关文章
- vue2.0 组件的生命周期
vue官方文档中给出的vue生命周期的流程图 如下: 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩子函数的执行. <!DOCTYPE html ...
- 通俗易懂了解Vue组件的生命周期
1.前言 在使用vue2.0进行日常开发中,我们总有这样的需求,我就想在页面刚一加载出这个表格组件时就发送请求去后台拉取数据,亦或者我想在组件加载前显示个loading图,当组件加载出来就让这个loa ...
- ReactJS入门(二)—— 组件的生命周期
如果你熟悉avalon,使用过 data-include-rendered 和 data-include-loaded 等回调方法,那么你会很好地理解React组件的各个生命周期. 说白了其实就是Re ...
- React Native 中组件的生命周期
概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命 ...
- ReactJS入门3:组件的生命周期
本文主要介绍组件的生命周期. 组建的生命周期主要分为3个:Mounting.Updating.Unmounting. 1. Mounting:组件被加载到DOM 在本阶段,主要有三个方法: 1 ...
- React组件和生命周期简介
React 简介----React 是 Facebook 出品的一套颠覆式的前端开发类库.为什么说它是颠覆式的呢? 内存维护虚拟 DOM 对于传统的 DOM 维护,我们的步骤可能是:1.初始化 ...
- Jetpack 架构组件 Lifecycle 生命周期 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- Tomcat 8(九)解读Tomcat组件的生命周期(Lifecycle)
Tomcat 8(七)解读Bootstrap介绍过.运行startup.bat.将引发Tomcat一连串组件的启动.事实上这一连串启动是通过组件的生命周期(Lifecycle)实现的 今天来看看Lif ...
- 202-React.Component组件、生命周期
一.概述 React可以将组件定义为类或函数.定义为类的组件当前提供了更多的功能.要定义React组件类,您需要扩展React.Component: class Welcome extends Rea ...
随机推荐
- 10.model/view实例(3)
任务:3x2的表格,第一个单元格显示当前时间 思考: 1.data函数里面QTime::currentTime()显示当前时间 2.但是这个事件是一个固定的时间,不会变动 3.需要时间变动,View就 ...
- Python--socket和threading编程
网络编程基础(一) TCP/IP协议 OSI/RM协议 特点:独立于计算机硬件和操作系统,统一分配网络地址,提供可靠服务,隔离了物理网络的硬件差异 协议分层(百度):网络接口层:IEE802.3(以太 ...
- 2016年第七届蓝桥杯省赛试题(JavaA组)
1.结果填空 (满分3分)2.结果填空 (满分5分)3.结果填空 (满分9分)4.代码填空 (满分11分)5.代码填空 (满分13分)6.结果填空 (满分15分)7.结果填空 (满分19分)8.程序设 ...
- android studio中配置X5 webview时的一个坑
在接入X5的第二步中,需要配置so文件,这里说一下遇到的坑 1. 需要把demo下载回来,不然你找不到so文件,找到so文件后放到自己相对应的目录下边,自己里面那个目录也没有,所以和文件夹一起复制过去 ...
- ubuntu 删除mysql
UBUNTU 彻底删除 MYSQL 然后重装 MYSQL 删除 mysql sudo apt-get autoremove --purge mysql-server-5.0sudo apt-get r ...
- 使用metasploit进行栈溢出攻击-5
我们先尝试使用这个脚本进行攻击: msf > use exploit/linux/myvictim msf exploit(myvictim) > set payload linux/x8 ...
- C++日志模块实现的经验之谈
以类的方式对日志模块进行封装,可创建一个单实例的接口或创建一个全局的日志对象指针,同时提供相应的对外写日志接口. 写日志的接口采用可变参数来建立,可使用va_list类型和##args参数,同时在写日 ...
- Appium的常用定位方法
使用uiautomatorviewer.bat工具来找到属性定位元素,在SDK的tools目录下找到该工具,双击打开.左边框内展示app的界面元素,右上角框内展示元素的层级关系,右下角框内展示元素的属 ...
- c++语言的学习笔记代码与笔记注释《函数部分》
具体的笔记以注释的形式写在代码内,每个知识点用函数的形式表现. #include <iostream>; #include<cmath> const double PI=3.1 ...
- css入门知识点整理
css入门知识点整理 不要嘲笑我这个蒟蒻..例子来源:w3school css其实就分为两个东西,一个是选择器,另外一个是声明.声明定义了某个对象的属性的值,这都是html的内容.重点要关注的是选择器 ...