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. java线程间的通信方式

    1.同步 synchronized 2.轮询 while   volatile 3.wait/notify机制 syncrhoized加锁的线程的Object类的wait()/notify()/not ...

  2. 小改造gotty，使之适合接收经过一层加密的URL

    当然,比起密码设置,这个安全性也不是特别高, 但比起直接传参数. 还是要专业一些的. 其实现思路分两种: 第一种是在gotty.js之内加入解url的函数. 第二种在是go源代码时,加入同等的解密函数 ...

  3. 使用python解决算法和数据结构--使用栈实现符号匹配

    现在要自己来实现这些数据结构和常用算法了. 把基础再打牢一些. 栈的作用很大,无须多言. 我尽量看了题目要求,自己来实现代码的. # coding = utf-8 class Stack: def _ ...

  4. 最小生成树模板【kruskal & prim】

    CDOJ 1966 Kruskal 解法 时间复杂度O(mlogm) m为边数,这里主要是边排序占时间,后面并查集还好 #include <cstdio> #include <cst ...

  5. （一）cygwin和vim——hello world！

    好吧,我现在初出茅庐,一无所有,只有一台win xp.做什么呢?要不要试试Unix命令行编程的感觉,想到就做.Just try! 1.首先安装cygwin,最好是选择离线安装包. 2.默认选择安装所有 ...

  6. WPF: Hide grid row

    http://stackoverflow.com/questions/2502178/wpf-hide-grid-row Setting all the Items in the Row to Vis ...

  7. day5.python列表练习题

    写代码,有如下列表,按照要求实现每一个功能 li = [“alex”, “WuSir”, “ritian”, “barry”, “wenzhou”] 1.计算列表的长度并输出 print(len(li ...

  8. 利用vcard和qrcode.js生成二维码导入联系人

    vCard是一种容许交换个人信息的数据规范,vCard数据格式的标识符是VCARD,vCard数据格式行是: 类型 [;参数]:值,具体的介绍百度都有,我们可以通过vcard来进行通讯录的保存,名片的 ...

  9. docker 安装配置

    1. 安装docker 环境是ubuntu 14.04 参照:  https://help.aliyun.com/document_detail/60742.html # step 1: 安装必要的一 ...

  10. BZOJ3052/UOJ#58 [wc2013]糖果公园 莫队 带修莫队 树上莫队

    原文链接https://www.cnblogs.com/zhouzhendong/p/BZOJ3052.html 题目传送门 - BZOJ3052 题目传送门 - UOJ#58 题意 给定一棵树,有 ...