Vue的生命周期(钩子函数)
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的生命周期(钩子函数)的更多相关文章
- vue之生命周期钩子函数之运用
一.什么是生命周期钩子函数: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行 ...
- vue的生命周期钩子函数
一.vue生命周期图示 二.钩子函数执行时间 beforeCreate 在创建实例之前,data只声明但没有赋值 在实例初始化之后,数据观测 (data observer) 和 event ...
- vue.js生命周期钩子函数及缓存
在使用vue.js进行开发时,使用最多的就是created.mounted.activated. 由于有些情况下,我们需要复用某些组件,因此需要用到keep-alive. 当引入keep-alive时 ...
- VUE的生命周期——钩子函数
- 关于 vue 生命周期 钩子函数 事件
vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染->更新->渲染.卸载等一系列过程,我们称这是vue的生命周期. 通俗的将就是vue实例从创建到销毁 ...
- Vue生命周期 钩子函数和组件传值
Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...
- vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...
- Vue 组件生命周期钩子
Vue 组件生命周期钩子 # 1)一个组件从创建到销毁的整个过程,就称之为组件的生命周期 # 2)在组件创建到销毁的过程中,会出现众多关键的时间节点, 如: 组件要创建了.组件创建完毕了.组件数据渲染 ...
- 对vue生命周期/钩子函数的理解
对于实现页面逻辑交互等效果,我们必须知晓vue的生命周期,才能愉快的玩耍,知道我们写的东西应该挂载到哪里,vue官方给出的api讲解的那叫一个简单啊,如下: 所有的生命周期钩子自动绑定this上下文到 ...
- VueRouter和Vue生命周期(钩子函数)
一.vue-router路由 1.介绍 vue-router是Vue的路由系统,用于定位资源的,在页面不刷新的情况下切换页面内容.类似于a标签,实际上在页面上展示出来的也是a标签,是锚点.router ...
随机推荐
- 如何登录Sitecore CMS
这是关于学习如何使用和开发Sitecore CMS的系列文章中的第一篇. 在使用Sitecore CMS之前,必须先登录.新Sitecore开发人员常见的一个问题是“我该在哪里登录?” 安装任何版本的 ...
- python: ImportError: cannot import name 'Style' from 'openpyxl.styles' 解决方法
import os, openpyxl from openpyxl.styles import Font, Style os.chdir("C:\\") wb = openpyxl ...
- python遍历目录os.walk(''d:\\test2",topdown=False)
os.walk(top, topdown=True, onerror=None, followlinks=False)遍历目录,topdown=false表示先返回目录,后返回文件 参数说明: top ...
- Codeforces 841B - Godsend
题目链接:http://codeforces.com/problemset/problem/841/B Leha somehow found an array consisting of n inte ...
- Codeforce 835A - Key races
Two boys decided to compete in text typing on the site "Key races". During the competition ...
- <转>jmeter(十)参数化
本博客转载自:http://www.cnblogs.com/imyalost/category/846346.html 个人感觉不错,对jmeter讲解非常详细,担心以后找不到了,所以转发出来,留着慢 ...
- 怎样从外网访问内网Redis数据库?
本地安装了一个Redis数据库,只能在局域网内访问到,怎样从外网也能访问到本地的Redis数据库呢?本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Redis数据库 默认安装的Redis ...
- Prometheus监控学习笔记之解读prometheus监控kubernetes的配置文件
0x00 概述 Prometheus 是一个开源和社区驱动的监控&报警&时序数据库的项目.来源于谷歌BorgMon项目.现在最常见的Kubernetes容器管理系统中,通常会搭配Pro ...
- redis 配置详解
# redis 配置文件示例 # 当你需要为某个配置项指定内存大小的时候,必须要带上单位, # 通常的格式就是 1k 5gb 4m 等酱紫: # # 1k => 1000 bytes # 1kb ...
- plsql developer 10注册码----亲测截止2017年5月6可用
亲测截止2017年5月6可用 Product Code:4t46t6vydkvsxekkvf3fjnpzy5wbuhphqzserial Number:601769password:xs374ca