当前位置:首页 > 技术分析 > 正文内容

Vue中的几个生命钩子函数名称_vue生命周期常用的四个钩子函数

ruisui884个月前 (02-09)技术分析21

今天总结一下Vue2中钩子函数的几个名称:一般面试说的是8个,有的说是十一个;有些说nextTick()是第十一个的,也有不承认的,说errorCaptured才是第11个,暂时就不争论了。今天都总结一下,每个函数做什么的,下次做一个全面总结,讲述一下什么父子组件函数执行顺序,还有一些混入使用优先级;

beforeCreate:初始化之前

此时的data methods还没有完成初始化,在beforeCreate回调函数中获取不到data声明的变量,也无法调用到methods中注册的方法;

created:初始化完毕

此时已经将data methods中的变量和方法初始化完毕,现在可以在created中使用data中声明的变量,也可以调用methods注册的方法;

beforeMount:挂载前

执行完created后开始处理模板,将模板准备挂载到DOM树中;此时模板已经在内存中完成编译,还未挂载到页面中去;

mounted:挂载后

此时已经将虚拟DOM挂载到DOM树上了,页面基本完成渲染;

beforeUpdate:数据更新前执行

此时已经检测到数据发生变化,现在已经将虚拟DOM中的数据进行变更,不过此时真实DOM中的数据还是旧的;

updated:数据更新后执行

现在已经将新的数据更新到DOM中;

beforDestroy:组件销毁前执行

路由切换,组件会进行销毁,在当前组件销毁前如果有什么需要处理的事情,可以在beforeDestory回调函数中执行;计时器之类的宏任务可以在此进行销毁;

Destroyed:组件销毁后执行

此时代表当前组件已经销毁;

有时候组件需要频繁切换,频繁切换会重复初始化组件,然后再销毁组件;对性能来说比较不友好,此时可以使用keep-alive,包含的组件可以不被销毁,一直保存在内存中;也可以进行配置,那些组件不销毁或者是那些组件不需要保存;

使用keep-alive时,声明周期钩子函数又多了两个回调函数:

1、activated:当进入当前组件时会被调用,可以在此函数中做些事件处理;获取信息之类的事情;

2、deactivated:当离开当前组件时会被调用,可以在此函数中做些需要保存的数据处理;

nextTick:如果需要页面渲染完毕后操作或处理事件,可以在$nextTick中处理,像输入框获取焦点之类的事件;

errorCaptured:错误俘获

意识时当子组件或者后代组件发生错误,可以用此回调函数进行俘获,返回值类型时Boolean类型,fales或true,意思是否要将错误信息向上级组件进行传递;

如果发现文章中有错误信息欢迎指点,共同学习进步;

后续会全面整理关于声明周期的所有详细内容,包括面试回问的知识点。

关注收藏不迷路,携手踏上前端路;

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/1832.html

标签: vue $nexttick
分享给朋友:

“Vue中的几个生命钩子函数名称_vue生命周期常用的四个钩子函数” 的相关文章

面试被逼疯:聊聊Python Import System?

面试官一个小时逼疯面试者:聊聊Python Import System?对于每一位Python开发者来说,import这个关键字是再熟悉不过了,无论是我们引用官方库还是三方库,都可以通过import xxx的形式来导入。可能很多人认为这只是Python的一个最基础的常识之一,似乎没有可以扩展的点了,...

博信股份新战略后再推新品 TOPPERS E2耳机售价199元

中新网6月21日电 20日,博信股份在北京正式推出新品TOPPERS主动降噪耳机E2,这是博信股份继2月战略暨新品发布会后的第二次新品亮相。价格方面,TOPPERS主动降噪耳机E2零售价199元,并于6月20日下午4点在京东商城公开销售。据介绍,TOPPERS主动降噪耳机E2采用AMS(奥地利微电子...

Vue Router 4 路由操作 - 路由导航

路由导航分为 声明式导航 和 编程式导航。通过 <router-link to="..."> 标签跳转的方式为声明式导航。通过 路由实例对象(router.push(...))跳转的为编程式导航。导航到不同的位置想要导航到不同的URL,使用 router.push 方法。...

uni-app基于vue开发小程序与标准vue开发新增点

1、路由跳转传参uni.navigateTo({ url: `/pages/transition/spreadTextAction?t=${this.options.t}&rt=${this.options.rt}&l=${this.options.l}`});uni.navigateBack({...

vue.js 双向绑定如何理解,有什么好处!#云南小程序开发

Vue.js 的双向数据绑定是借助于 JavaScript 的一些特性,如对象的属性 getter 和 setter 以及 Vue 的依赖追踪系统实现的。简单来说,双向数据绑定就是数据与视图间的双向通信,也就是说数据的改变会马上反映到视图中,视图的改变也会立刻改变数据。具体来说,当你改变了数据时,视...

推荐一个Java微服务商业级Sass开源电商小程序(开源,企业级项目)

使用Java微服务开发,SpringBoot2框架、MyBatis-plus持久层框架、Redis作为缓存、MySql8作为数据库。 前端vuejs作为开发语言,使用uniapp编码,同时支持微信小程序、安卓App、苹果App。 支持集群部署,单机部署。 unimall 针对中小商户、企业和个人消...