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. TURN TAP: Temporal Unit Regression Network for Temporal Action Proposals（ICCV2017）

    Motivation 实现快速和准确地抽取出视频中的语义片段 Proposed Method -提出了TURN模型预测proposal并用temporal coordinate regression来 ...

  2. Flink--将表转换为DataStream或DataSet

    A Table可以转换成a DataStream或DataSet.通过这种方式,可以在Table API或SQL查询的结果上运行自定义的DataStream或DataSet程序 将表转换为DataSt ...

  3. Codeforces 989D A Shade of Moonlight

    A Shade of Moonlight 列列式子发现, 对于同一个云来说只有反向的云才能和它相交, 然后我们发现这个东西有单调性,然后二分就好啦. #include<bits/stdc++.h ...

  4. redis 在 php 中的应用

    一.redis 在 php 中的应用(Key篇) 二.redis 在 php 中的应用(String篇) 三.redis 在 php 中的应用(Hash篇) 四.redis 在 php 中的应用(Li ...

  5. Linux安装Tomcat-Nginx-FastDFS-Redis-Solr-集群——【第二集之新建虚拟机】

    1, 2, 3, 4,(如果选择版本时,发现选项中没有centos,可以选择other linux2.6.x kernel) 5,(虚拟机命名:Centos_用途_IP) 6,(选择Split vir ...

  6. Selenium+PhantomJS使用时报错原因及解决方案（转）

    Selenium+PhantomJS使用时报错原因及解决方案     问题 今天在使用selenium+PhantomJS动态抓取网页时,出现如下报错信息: UserWarning: Selenium ...

  7. HDU3339 In Action 【最短路】+【01背包】

    <题目链接> 题目大意: 给出一个0-n组成的图,1-n的点上分布着值为pow的电站,给出图的m条边以及距离,从0出发到n个点中的x个点的行走距离和最小(因为是每炸一个点派出一辆坦克),且 ...

  8. 数据结构--图 的JAVA实现(上)

    1,摘要: 本系列文章主要学习如何使用JAVA语言以邻接表的方式实现了数据结构---图(Graph),这是第一篇文章,学习如何用JAVA来表示图的顶点.从数据的表示方法来说,有二种表示图的方式:一种是 ...

  9. ORA-01000

    A ResultSet object is automatically closed by the Statement object that generated it when that State ...

  10. react组件通信那些事儿

    父组件是调用组件的组件.现在看来,感觉父组件就是一个壳子,定义好壳子里面会有什么,而子组件是一个具体的实现,说明,会用到什么东西,如果有这些东西,会进行什么操作.总之,父组件是材料,有水和泥,子组件告 ...