首页 > 其他分享 >Vue 生命周期有哪些?

Vue 生命周期有哪些?

时间:2023-11-07 17:34:23浏览次数:32  
标签:生命周期 服务器端 实例 哪些 钩子 调用 Vue 渲染

Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载 Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。

1、beforeCreate

在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用

2、created

在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer)属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见

3、beforeMount

在挂载开始之前被调用:相关的 render 函数首次被调用

4、mounted

el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子,如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内

5、beforeUpdate

数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器,该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行

6、updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子

7、activated

keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用

8、deactivated

keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用

9、beforeDestroy

实例销毁之前调用。在这一步,实例仍然完全可用。该钩子在服务器端渲染期间不被调用

10、destroyed

Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解除绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用

11、errorCaptured(2.5.0+ 新增)

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串,此钩子可以返回 false 以阻止该错误继续向上传播

标签:生命周期,服务器端,实例,哪些,钩子,调用,Vue,渲染
From: https://www.cnblogs.com/yuhuo123/p/17815481.html

相关文章

  • 视频监控管理平台EasyCVR定制算法如何操作?包含哪些?
    视频监控平台EasyCVR能在复杂的网络环境中,将分散的各类视频资源进行统一汇聚、整合、集中管理,在视频监控播放上,TSINGSEE青犀视频安防监控汇聚平台可支持1、4、9、16个画面窗口播放,可同时播放多路视频流,也能支持视频定时轮播。视频监控汇聚平台EasyCVR支持多种播放协议,包括:HLS、HTTP......
  • 视频监控管理平台EasyCVR定制算法如何操作?包含哪些?
    视频监控平台EasyCVR能在复杂的网络环境中,将分散的各类视频资源进行统一汇聚、整合、集中管理,在视频监控播放上,TSINGSEE青犀视频安防监控汇聚平台可支持1、4、9、16个画面窗口播放,可同时播放多路视频流,也能支持视频定时轮播。视频监控汇聚平台EasyCVR支持多种播放协议,包括:HLS、HTT......
  • vue中使用Loading这个加载工具
    在src/theme文件夹中建立loading.scss文件,内容如下:.loading-next{ width:100%; height:100%;}.loading-next.loading-next-box{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}.loading-next.loading-next-box-warp{ width:80px......
  • VUE监听网页关闭和隐藏显示(页签关闭调用某一个接口)
    mounted(){this.id=this.$route.query.id;window.addEventListener("beforeunload",async(e)=>awaitthis.beforeunloadHandler(e));window.addEventListener("unload",(e)=>this.unloadHandle......
  • 项目经理的证书,都有哪些?
    项目经理是一种从事项目管理工作的职场工作者,项目经理是需要具有较高工作水平和管理能力的。有朋友问项目经理可以考的证书有哪些?下面我们给大家介绍一下。 一、PMP® —项目经理必备证书 PMP®认证的全称是ProjectManagementProfesional,是项目管理专业人员的资格认证。PMP®认......
  • socks5代理怎么配置?socks5代理的优点有哪些?
    随着网络威胁和数据泄露的数量不断增加,在浏览互联网时保护个人信息并保持匿名变得至关重要。实现此目的的一种有效方法是使用Socks5代理IP。如今Socks5代理被广泛应用于跨境电商/社媒平台、SEO业务、网络抓取等领域。一、socks5代理怎么配置?要配置socks5代理,您需要按照以下步骤进行......
  • Gin+Vue+微服务打造秒杀商城,打造高并发抢购平台
    gin+vue实战后端:用户管理用户列表登录/登出商品管理商品的增上改查活动管理商品关联成功率redis队列,不成功的回到队列继续,成功的从队列删除结束难点:代码和部署完全隔离怎么避免雪崩根据后端承载能力,进行限流和过载保护使用redis承载海量QPSmysql性......
  • vue3 axios 获得基地址
    1.位置 //axios基础的封装importaxiosfrom'axios'import'element-plus/es/components/message/style/css'import{ElMessage}from'element-plus'consthttpInstance=axios.create({baseURL:'http://laravel.cn',//基......
  • Vue源码学习(十五):diff算法(二)交叉比对(双指针)
    好家伙, 本节来解决我们上一章留下来的问题,新旧节点同时有儿子的情况本章继续解决 1.要做什么?本章将解决,1.在相同tag下子元素的替换问题2.使用双指针进行元素替换,实现效果如下: letvm1=newVue({data:{name:'张三'}})letrender1=compileToFunc......
  • vue:视情况绑定对应的校验。
    需求:表格内输入参数的默认值,有的参数必须,有的参数可为空,通过某个属性控制。 写两个校验规则,一个是必须有值,一个是可以为空。 首先将要校验的字段绑定在form-item的prop上。随后通过判断控制属性去绑定对应的校验规则。 ......