vue中的钩子函数
什么是vue的钩子函数?
Vue 实例在被创建时,会经过一系列的初始化过程,初始化过程中会运行一些函数,叫做生命周期钩子函数,通过运用钩子函数,用户在可以在Vue实例初始化的不同阶段添加自己的代码,以此来实现自己想做的事情。钩子函数在Vue初始化、更新数据、销毁时会被自动调用。
钩子函数的生命周期示意图:
钩子函数详解:
beforeCreate:vue实例创建初始化后,数据观测 (data observer) 和event/watch事件配置之前触发;
- created:在实例创建完成后被立即调用,此时实例已完成数据观测 (data observer),属性方法的运算,watch/event 事件回调的配置。然而,挂载阶段还没开始,$el 属性目前不可见;
- beforeMount:实例挂载开始之前被调用, render 函数首次被调用,该钩子在服务器端渲染期间不被调用;
- mounted:实例已挂载。
- beforeUpdate:数据更新时调用,发生在虚拟 DOM 打补丁之前,这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器,该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行;
- updated:数据更改会导致虚拟 DOM 重新渲染和打补丁,在这之后会调用updated钩子。
- beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用,该钩子在服务器端渲染期间不被调用;
- destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会接触绑定,所有的事件监听器会被移除,所有的子实例也会被销毁,该钩子在服务器端渲染期间不被调用
- activated:当某个组件使用了keep-alive组件缓存时,该组件激活时调用activated钩子,该钩子在服务器端渲染期间不被调用;
- deactivated:当某个组件使用了keep-alive组件缓存时,该组件停用时调用deactivated钩子,该钩子在服务器端渲染期间不被调用;
- errorCaptured:当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
vue中的钩子函数的更多相关文章
- vue中的钩子函数的理解
接下来我们对几个钩子函数进行解释 beforeCreated:这个钩子函数实在vue实例创建后,触发的.这个时候还没有进行data里的数据监听和事件的初始化 其实大家很多时候都会在created钩子函 ...
- 【转】vue中的钩子函数。。
前言 在vue开发SPA应用的过程中,多数情况下我们需要解决一个问题 就是在路由跳转的过程中需要更新你SPA应用的 title , 这一节不说其他,就展示如何使用 vue-router 的 导航钩子 ...
- Vue -自定义指令&钩子函数
除了核心功能默认内置的指令,Vue也允许注册自定义指令 页面加载后,让文本框自动获取焦点,原生js做法是获取文本框元素后调用focus()方法,但Vue不建议手动操作DOM元素,所以此时要自定义指令 ...
- Vue生命周期 钩子函数和组件传值
Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...
- VUE生命周期中的钩子函数及父子组件的执行顺序
先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行 ...
- vue 组件中的钩子函数 不能直接写this
export default { data(){ return { num: 18 } }, beforeRouteEnter(to, from, next){ next(vm=>{ vm.nu ...
- VueRouter和Vue生命周期(钩子函数)
一.vue-router路由 1.介绍 vue-router是Vue的路由系统,用于定位资源的,在页面不刷新的情况下切换页面内容.类似于a标签,实际上在页面上展示出来的也是a标签,是锚点.router ...
- vue之router钩子函数
模块一:全局导航钩子函数 1.vue router.beforeEach(全局前置守卫) beforeEach的钩子函数,它是一个全局的before 钩子函数, (before each)意思是在 每 ...
- Vue系列之 => 钩子函数生命周期
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- GDB调试-从入门到实践
你好,我是雨乐! 在上篇文章中,我们分析了线上coredump产生的原因,其中用到了coredump分析工具gdb,这几天一直有读者在问,能不能写一篇关于gdb调试方面的文章,今天借助此文,分享一些工 ...
- Laravel Redis分布式锁实现源码分析
首先是锁的抽象类,定义了继承的类必须实现加锁.释放锁.返回锁拥有者的方法. namespace Illuminate\Cache; abstract class Lock implements Loc ...
- linux7,一台物理机上使用VM装多个虚拟机,始终只有一个虚拟机网络正常,其他虚拟机报错Error: Connection activation failed: No suitable device found for this connection.
今天在VM新装了一个虚拟机,结果发现原来的虚拟机连不上了,重启网络服务后报错 Error: Connection activation failed: No suitable device found ...
- spring security 自动登录 --- 心得
1.前言 仍然是使用cookie存储登录数据,但是存储的数据 由 spring security自动创建 ,当登出后自动删除cookie, 如果不登出也仍在生命周期内,关闭浏览器再打开将会自动登录,无 ...
- Go语言系列- Socket编程和Redis
Socket编程 一.socket编程概述 什么是socket编程? socket编程是计算机PC机器上2个程序通过一个双向的通信连接实现数据的交互,这个连接的一端就是一个socket.socket的 ...
- 自定义异步爬虫架构 - AsyncSpider
作者:张亚飞 山西医科大学在读研究生 1. 并发编程 Python中实现并发编程的三种方案:多线程.多进程和异步I/O.并发编程的好处在于可以提升程序的执行效率以及改善用户体验:坏处在于并发的程序不容 ...
- 虚拟机上CentOS7环境配置
原文链接:https://www.toutiao.com/i6493449649939022350/ 之前网络和基本环境以及完成,现在我们再配置一些内容,方便我们之后的学习. 设置网络YUM源 下载我 ...
- HDU 2673-shǎ崽 OrOrOrOrz(C语言描述)
问题描述 问题是: 为您提供了一系列不同的整数, 请选择 "数字" 如下: 首先选择最大的, 然后是最小的, 然后是第二个最大的, 第二个最小的. 直到所有的数字被选中.例如, 给 ...
- springMvc 启动过程
转载自https://www.jianshu.com/p/dc64d02e49ac 这里给出一个简洁的文字描述版SpringMVC启动过程: tomcat web容器启动时会去读取web.xml这样的 ...
- javascript的AMD规法--esl与requirejs浅介。
AMD规范,全称是Asynchronous Module Definition,即异步模块加载机制.从它的规范描述页面看,AMD很短也很简单,但它却完整描述了模块的定义,依赖关系,引用关系以及加载机制 ...