专栏首页Android干货vue学习笔记-生命周期

vue学习笔记-生命周期

beforeCreate

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

created

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

beforeMount

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

mounted

实例被挂载后调用,这时 el 被新创建的 vm.$el 替换了。 如果根实例挂载到了一个文档内的元素上,当mounted被调用时vm.$el也在文档内。

注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕

beforeUpdate

数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。

updated

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

当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。

注意 updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以在 updated 里使用 vm.$nextTick

updated: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been re-rendered
  })
}

该钩子在服务器端渲染期间不被调用。

activated

被 keep-alive 缓存的组件激活时调用。

该钩子在服务器端渲染期间不被调用。

deactivated

被 keep-alive 缓存的组件停用时调用。

该钩子在服务器端渲染期间不被调用。

beforeDestroy

实例销毁之前调用。在这一步,实例仍然完全可用。

该钩子在服务器端渲染期间不被调用。

destroyed

实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。

该钩子在服务器端渲染期间不被调用。

errorCaptured

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 项目实战工具类(二):ZipUtils(压缩/解压缩文件相关)

    听着music睡
  • Android项目实战(五十一):浅谈GreenDao

    HX_User类会变成下面情况,注意 属性值的get和set方法不要自己写,是make project之后自动生成的

    听着music睡
  • Android项目实战(四十三):夜神模拟器

    听着music睡
  • 浅谈数字IC验证中的面向对象编程(抽象基类和继承)

    在软件工程的早期,人们与项目的复杂性增长和大型开发团队的管理挑战进行了艰巨的斗争,面向对象编程(OOP)为解决这些问题带来了革命性的解决方案。

    AsicWonder
  • 闲聊javascript设计模式 - 单例模式

    闲聊javascript设计模式 - 单例模式 最近在写电商网站的过程中,遇到了许多问题,也有很多遗憾的地方, 这几天一直在回忆开发的过程,现在想来有许多地方应...

    web前端教室
  • 前端|Vue实例与模板语法

    之前学习了创建Vue实例以及数据与方法,本次我将接着上次来学习,本次我学习的内容是实例生命周期钩子。

    算法与编程之美
  • 不用写代码的特效组件升级,拖拽即用,还支持自动枚举参数!

    ShaderHelper2 组件我们已经介绍过两次了,不了解的伙伴可以看下面两篇文章:

    张晓衡
  • ShaderHelper2 组件升级,支持自动枚举参数!

    ShaderHelper2 组件我们已经介绍过两次了,不了解的伙伴可以看下面两篇文章:

    张晓衡
  • Python格式化输出(%用法和format用法)

    round(number[, ndigits]) 参数: number - 这是一个数字表达式。 ndigits - 表示从小数点到最后四舍五入的位数。默认值为...

    zeruns
  • 如何用Map对象创建Set对象

    Java中的Map和Set有不少相似之处。本文将分享一个把Map类转化成Set类的小技巧。

    哲洛不闹

扫码关注云+社区

领取腾讯云代金券