Vue一共有10(严格说应该是8个,总数是10个 因为有两个是属于存在keep-alive才会生效的生命周期)个生命周期函数,我们可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容。
其实在Vue的官网有一张图已经很好的诠释了生命周期,我在这里就不再多讲了,直接贴图,然后上程序代码。

html

<div id="app">
{{message}}
<p><button @click="jia">加分</button></p>
</div>
//外部销毁
<button onclick="app.$destroy()">销毁</button>

js

  var app=new Vue({
el:'#app',
data:{
message:1
},
methods:{
jia:function(){
this.message ++;
}
},
beforeCreate:function(){
console.log('1-beforeCreate 初始化之后');
},
created:function(){
console.log('2-created 创建完成');
},
beforeMount:function(){
console.log('3-beforeMount 挂载之前');
},
mounted:function(){
console.log('4-mounted 被创建');
},
beforeUpdate:function(){
console.log('5-beforeUpdate 数据更新前');
},
updated:function(){
console.log('6-updated 被更新后');
},
activated:function(){ // 存在keep-alive(Vue内置的组件 有缓存作用 放置重新渲染DOM)才会生效
console.log('7-activated');
},
deactivated:function(){ //存在keep-alive才会生效
console.log('8-deactivated');
},
beforeDestroy:function(){
console.log('9-beforeDestroy 销毁之前');
},
destroyed:function(){
console.log('10-destroyed 销毁之后')
} })

总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。

  创建前/后

  在beforeCreated阶段,vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。

  在created阶段,vue实例的数据对象data有了,$el还没有。

  载入前/后

  在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。

  在mounted阶段,vue实例挂载完成,data.message成功渲染。

  更新前/后

  当data变化时,会触发beforeUpdate和updated方法。

  销毁前/后

  在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在
第一次页面加载会触发哪几个钩子

  第一次加载会触发 beforeCreate、created、beforeMount、mounted

DOM 渲染在哪个周期中就已经完成

  mounted

简述每个周期具体适合哪些场景

  生命周期钩子的一些使用方法:

  beforecreate : 可以在这加个loading事件,在加载实例时触发

  created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用

  mounted : 挂载元素,获取到DOM节点 updated : 如果对数据统一处理,在这里写上相应函数

  beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom

父子组件的生命周期走向

Vue的生命周期(钩子函数)的更多相关文章

  1. vue之生命周期钩子函数之运用

    一.什么是生命周期钩子函数: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行 ...

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

    一.vue生命周期图示 二.钩子函数执行时间 beforeCreate      在创建实例之前,data只声明但没有赋值  在实例初始化之后,数据观测 (data observer) 和 event ...

  3. vue.js生命周期钩子函数及缓存

    在使用vue.js进行开发时,使用最多的就是created.mounted.activated. 由于有些情况下,我们需要复用某些组件,因此需要用到keep-alive. 当引入keep-alive时 ...

  4. VUE的生命周期——钩子函数

  5. 关于 vue 生命周期 钩子函数 事件

    vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染->更新->渲染.卸载等一系列过程,我们称这是vue的生命周期. 通俗的将就是vue实例从创建到销毁 ...

  6. Vue生命周期 钩子函数和组件传值

    Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...

  7. vue生命周期图示中英文版Vue实例生命周期钩子

    vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...

  8. Vue 组件生命周期钩子

    Vue 组件生命周期钩子 # 1)一个组件从创建到销毁的整个过程,就称之为组件的生命周期 # 2)在组件创建到销毁的过程中,会出现众多关键的时间节点, 如: 组件要创建了.组件创建完毕了.组件数据渲染 ...

  9. 对vue生命周期/钩子函数的理解

    对于实现页面逻辑交互等效果,我们必须知晓vue的生命周期,才能愉快的玩耍,知道我们写的东西应该挂载到哪里,vue官方给出的api讲解的那叫一个简单啊,如下: 所有的生命周期钩子自动绑定this上下文到 ...

  10. VueRouter和Vue生命周期(钩子函数)

    一.vue-router路由 1.介绍 vue-router是Vue的路由系统,用于定位资源的,在页面不刷新的情况下切换页面内容.类似于a标签,实际上在页面上展示出来的也是a标签,是锚点.router ...

随机推荐

  1. 如何登录Sitecore CMS

    这是关于学习如何使用和开发Sitecore CMS的系列文章中的第一篇. 在使用Sitecore CMS之前,必须先登录.新Sitecore开发人员常见的一个问题是“我该在哪里登录?” 安装任何版本的 ...

  2. python: ImportError: cannot import name 'Style' from 'openpyxl.styles' 解决方法

    import os, openpyxl from openpyxl.styles import Font, Style os.chdir("C:\\") wb = openpyxl ...

  3. python遍历目录os.walk(''d:\\test2",topdown=False)

    os.walk(top, topdown=True, onerror=None, followlinks=False)遍历目录,topdown=false表示先返回目录,后返回文件 参数说明: top ...

  4. Codeforces 841B - Godsend

    题目链接:http://codeforces.com/problemset/problem/841/B Leha somehow found an array consisting of n inte ...

  5. Codeforce 835A - Key races

    Two boys decided to compete in text typing on the site "Key races". During the competition ...

  6. <转>jmeter(十)参数化

    本博客转载自:http://www.cnblogs.com/imyalost/category/846346.html 个人感觉不错,对jmeter讲解非常详细,担心以后找不到了,所以转发出来,留着慢 ...

  7. 怎样从外网访问内网Redis数据库?

    本地安装了一个Redis数据库,只能在局域网内访问到,怎样从外网也能访问到本地的Redis数据库呢?本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Redis数据库 默认安装的Redis ...

  8. Prometheus监控学习笔记之解读prometheus监控kubernetes的配置文件

    0x00 概述 Prometheus 是一个开源和社区驱动的监控&报警&时序数据库的项目.来源于谷歌BorgMon项目.现在最常见的Kubernetes容器管理系统中,通常会搭配Pro ...

  9. redis 配置详解

    # redis 配置文件示例 # 当你需要为某个配置项指定内存大小的时候,必须要带上单位, # 通常的格式就是 1k 5gb 4m 等酱紫: # # 1k => 1000 bytes # 1kb ...

  10. plsql developer 10注册码----亲测截止2017年5月6可用

    亲测截止2017年5月6可用 Product Code:4t46t6vydkvsxekkvf3fjnpzy5wbuhphqzserial Number:601769password:xs374ca