vue生命周期

　1.　vue1.0版本与vue2.0版本生命周期的不同

　　　　vue1.0版本生命周期图示

图1  vue1.0版本生命周期

vue1.0版本的生命周期:
　　　　init 实例创建之前
　　　　created  实例已经创建
　　　　beforeCompile  编辑之前
　　　　compiled   编辑之后
　　　　ready √ -> mounted  插入到文档
　　　　beforeDestroy  销毁之前
　　　　destroyed   销毁之后

　　注意：

　   　　　在vue1.0版本常用的是生命周期 中的 ready

　　2. vue2.0版本生命周期图示

图2  vue2.0版本生命周期

vue2.0版本的生命周期:
　　beforeCreate  组件实例刚刚被创建,属性都没有
　　created        实例已经创建完成，属性已经绑定
　　beforeMount   模板编译之前
　　mounted  模板编译之后，代替之前ready *
　　beforeUpdate  组件更新之前
　　updated  组件更新完毕 *
　　beforeDestroy     组件销毁前
　　destroyed  组件销毁后

vue2.0 生命周期的demo代码，通过弹出效果，理解生命周期

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生命周期</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>

</style>
<script src="vue.js"></script>
<script>

window.onload=function(){
new Vue({
el:'#box',
data:{
msg:'welcome vue2.0'
},
methods:{
update(){
this.msg='大家好';
},
destroy(){
this.$destroy();
}
},
beforeCreate(){
console.log('组件实例刚刚被创建');
},
created(){
console.log('实例已经创建完成');
},
beforeMount(){
console.log('模板编译之前');
},
mounted(){
console.log('模板编译完成');
},
beforeUpdate(){
console.log('组件更新之前');
},
updated(){
console.log('组件更新完毕');
},
beforeDestroy(){
console.log('组件销毁之前');
},
destroyed(){
console.log('组件销毁之后');
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="更新数据" @click="update">
<input type="button" value="销毁组件" @click="destroy">
{{msg}}
</div>
</body>
</html>

vue的生命周期（又称钩子函数）----以及vue1.0版本与vue2.0版本生命周期的不同的更多相关文章

  1. vue学习之生命周期和钩子函数

    参考文章:Vue2.0 探索之路——生命周期和钩子函数的一些理解 抛出问题: 我们有时候会在几个钩子函数里做一些事情,那么什么时候做,该在哪个函数里做? 生命周期简介 结合代码看el 和 data以及 ...

  2. vue生命周期、钩子函数

    https://segmentfault.com/a/1190000011381906    详解生命周期和钩子函数 每个vue实例再被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期 ...

  3. vue教程2-01 vue生命周期、钩子函数

    vue教程2-01 vue生命周期.钩子函数 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  4. Vue（3）- 安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用

    一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...

  5. Vue 3 --安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用

    一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...

  6. vue学习笔记(二)vue的生命周期和钩子函数

    前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...

  7. vue学习（五）生命周期 的钩子函数

    生命周期的钩子函数 主要有以下几种 beforeCreate created beforeMount mounted beforeUpdate updated activated deactivate ...

  8. [前端] VUE基础 (5) (过滤器、生命周期、钩子函数)

    一.过滤器 过滤器分为局部过滤器和全局过滤器. 1.局部过滤器 <body> <div id="app"> </div> <script ...

  9. Vue2.0 【第二季】第4节 Vue的生命周期（钩子函数）

    目录 Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函数) Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函 ...

随机推荐

  1. kickstart-E

    A题 简答模拟题 #include <iostream> #include<stdio.h> #include <set> #include <algorit ...

  2. 【Maven】Select Dependency 无法检索

    问题: 在 “pom.xml” 中,点击  “Dependencies” -> “Add” 添加依赖时,无法检索. 如下图所示: 解决办法:   依次点击 “Windows”->“Show ...

  3. 【Android】Tips for Android developer: “Conversion to Dalvik format failed: Unable to execute dex: null”

    Androiddeveloper, I have met a strange problem when I want use a third party jar, it remained me tha ...

  4. Migrating your code from 9.3 to 10.x

    刚发现ArcGIS Objects SDK提供了一个代码升级分析工具,用于辅助将程序从9.3升级到10.X:ArcGIS Code Migration Analyzer. 安装sdk后,在vs2010 ...

  5. Loadrunner和JMeter并发对比

    今天在项目中测试发现,其实LR才是实际意义上的并发测试,JMeter不算并发 记录用户登录日志: LR脚本: 1.登录操作放在init初始化中,用5个虚拟用户并发测试:

  6. Filebeat6.31整合Kafka集群消息队列（三）

    wget https://artifacts.elastic.co/downloads/beats/filebeat/filebeat-6.3.2-linux-x86_64.tar.gz [root@ ...

  7. keepalived当主节点切换时脚本通知 lvs

    脚本 在keepalived.conf中添加 mail  查看邮件 实验dr实验模型 给director 做主从 4台服务器 rip:192.168.0.103 rip2:192.168.0.104 ...

  8. LOJ#6433. 「PKUSC2018」最大前缀和 状压dp

    原文链接https://www.cnblogs.com/zhouzhendong/p/LOJ6433.html 题解 枚举一个集合 S ,表示最大前缀和中包含的元素集为 S ,然后求出有多少个排列是这 ...

  9. 认识Fiddler

    一.Fiddler界面介绍.(注:下图中的功能区面板显示的是“Inspectors”的选项卡界面) 二.工具栏介绍. 1.气泡:备注.添加之后在会话栏的Comment列中显示备注内容. 2.Repla ...

  10. Spring 实现两种设计模式：工厂模式和单态模式（单例模式）

    本文摘自:李刚 著 <轻量级 Java EE企业应用实战 Struts2+Spring+hibernate整合开发> 在Spring 中大量使用的以下两种设计模式:工厂模式和单态模式. 工 ...