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. Php7有哪些新特性：

    PHP7在PHP5的基础上又做了一次质的提升,当然改变很多,我这里以我的总结简单说下,主要发生了下面这些更改: 移除了一些旧的特性 ZEND引擎升级到Zend Engine 3,也就是所谓的PHP N ...

  2. github协作开发遇到的问题

    1.十一来了,帝都不好买票,30号就调休一天回去了,项目还没搞完,紧张的不行,就自己和同事搞了一个github协作开发,由于是功能和公司项目不是很沾边,但是是自己的主要工作,就和同事协调了一下,搭建了 ...

  3. 树递归写法ref实现

    using System; using System.Collections.Generic; using System.Linq; namespace ConsoleAppTest { class ...

  4. HTML学习之给div高度设置百分比不生效的问题

    这几天在学习HTML的知识,今天想做一个极为简单的页面,就是分为头部,内容和底部,本来用三个div即可,可是给div高度设置百分比时发现不生效,具体页面如下,非常简单. 下面是html部分: < ...

  5. Java基础知识➣泛型整理（四）

    概述 泛型的本质是参数化类型,使用同一套代码来满足不同数据类型的业务需要,提高代码的执行效率,使代码简单明了. 泛型方法 该方法在调用时可以接收不同类型的参数.根据传递给泛型方法的参数类型,编译器适当 ...

  6. 通过awk获取netstat命令中的进程号

    需要如下: 获取进程号

  7. bootstrap AdminLTE模版的使用

    参考:  https://adminlte.io/themes/AdminLTE/documentation/index.html  https://blog.csdn.net/gebitan505/ ...

  8. java分页实现

    虽然现在有很多好用的框架,对分页进行支持,很简单的就把分页的效果做出来,但是如果自己手写是一个怎样的流程的?今天就来说说它,手动实现分页效果. 一.分页的思路 首先我们得知道写分页代码时的思路,保持思 ...

  9. API接口设计,rest,soap

    REST之前的重要协议SOAP rest(简单理解风格.约束.设计理念) rest之前是SOAP:SOAP Web API采用RPC风格,它采用面向功能的架构,所以我们在设计SOAP Web API的 ...

  10. Pandas学习2 --- 数据类型Series、DataFrame

    为了更加清楚显示,请点击链接用Jupyter Notebook 查看:截图如下,