程序员

Vue生命周期

作者:admin 2021-08-18 我要评论

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

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

在这里插入图片描述

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

  1. beforeCreate
    在实例初始化之后,数据观测(data observer)和event / watcher 事件配置之前被调用(在这里是不能访问vue中data,methods…中的数据及方法的)

  2. created
    在实例创建完成后立即被调用,在这一步,实例已经完成了以下配置:数据观测(data observer)属性方法的运算,watch/event事件的回调。然而挂载阶段还没开始,$el属性目前不可见(也就是说在这个阶段可以放实例中的方法和属性,但是并没有在页面挂载dom所以不能访问dom)。

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

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

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

  6. updata
    由于数据更改导致虚拟dom重新渲染和打补丁,在这之后会调用改钩子函数。

  7. activated
    keep-alive 组件激活时。改钩子函数不会在服务器渲染期建被调用。

  8. deactivated
    keep-alive 组件停用时调用。改钩子函数不会在服务器渲染期建被调用。

  9. beforeDestroy
    实例销毁前调用。在这一步,实例仍然完全可用。 改钩子函数不会在服务器渲染期建被调用。

  10. destroyed
    Vue实例销毁后调用。调用后,Vue实例指令的所有东西都会解绑,所有事件监听器都会呗移出,所有的子实例也会被销毁。改钩子函数不会在服务器渲染期建被调用。

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

;原文链接:https://blog.csdn.net/weixin_49405038/article/details/115896716

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • Vue生命周期

    Vue生命周期

  • 根据某一列的进行去重的小工具----dupl

    根据某一列的进行去重的小工具----dupl

  • 夜深人静写算法(二十八)- 尺取法

    夜深人静写算法(二十八)- 尺取法

  • 云服务器(Windows系统)快速上传下载

    云服务器(Windows系统)快速上传下载

腾讯云代理商
海外云服务器