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. skynet 报错 skynet 服务缺陷 Lua死循环

    我的报错如下: 看起来是skynet中lua死循环,实际上,可能只是本地配置出了问题,比如,我的数据库连接不上了,因为我把别人的配置更新到我本地了,吗,mysql秘密不对 解决办法就是将配置文件中的, ...

  2. Ngine X 完全开发指南 读书笔记-前言

    一开始接触的编程语言是VF,那是一种可视化编程语言,所谓的可视化,就是运行结果能直接看得到的,非常直观,便于调试,适合刚刚接触编程的新人学习.当时学得懵懂,半知半解,就是感觉程序非常神奇,常常几句代码 ...

  3. caffe生成voc格式lmdb

    要训练ssd基本都是在liu wei框架下改,生成lmdb这一关照葫芦画瓢总遇坑,记录之: 1. labelmap_voc.prototxt要根据自己的分类修改,比如人脸检测改成这样: item { ...

  4. bash 替换特殊字符

    bash 替换特殊字符 PID=`netstat -tpln|grep `;PID=${PID#*LISTEN};PID=`echo $PID | sed -s "s/\/java//g&q ...

  5. flask 自定义验证器(行内验证器、全局验证器)

    自定义验证器 在WTForms中,验证器是指在定义字段时传入validators参数列表的可调用对象,下面来看下编写自定义验证器. 行内验证器 除了使用WTForms提供的验证器来验证表单字段,我们还 ...

  6. Linux基础命令---iptables-save

    iptables-save iptables-save指令可以将内核中当前的iptables配置导出到标准输出.通过IO重定向功能来定向输出到文件. 此命令的适用范围:RedHat.RHEL.Ubun ...

  7. Linux基础命令---查找进程id

    pidof pidof可以查找指定名称的进程的pid,将结果送到标准输出.pidof有两种返回值:0,找到至少一个进程:1,没有找到进程.pidof实际上与killall5相同:程序根据调用它的名称进 ...

  8. JS实现document.ready

    通常我们想要在页面内容加载完成后运行 JS 时,都会使用 window.onload 来处理,比如: window.onload = function(){ alert('Hello World!') ...

  9. [转载]web安全之token

    参考:http://blog.csdn.net/sum_rain/article/details/37085771 Token,就是令牌,最大的特点就是随机性,不可预测.一般黑客或软件无法猜测出来. ...

  10. SQLServer将服务器A表写到服务器B表

       不同服务器数据库之间的数据操作    --创建链接服务器  exec sp_addlinkedserver  'ITSV ', ' ', 'SQLOLEDB ', '远程服务器名或ip地址 '  ...