专栏首页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 条评论
登录 后参与评论

相关文章

  • vue学习 十六 Vue生命周期

    下图展示了实例的生命周期。不需要立马弄明白所有的东西,不过随着不断学习和使用,它的参考价值会越来越高。

    meihuasheng
  • activiti学习笔记(三) 监听生命周期

    activiti监听生命周期 activiti生命周期的作用 生命周期的作用是在构建processEngine实例时候或者关闭的时候调用对应处理方法,比如我在启...

    cfs
  • Android学习笔记(六)Fragment的生命周期

      在上一篇博文中对Fragment做了简单的介绍,现在再来探讨一下Fragment的生命周期。 一、Fragment的几种状态:   与Activity类...

    codingblock
  • Vue2.5笔记:Vue的实例与生命周期

    理解与认识 Vue 的实例是我们学习 Vue 非常重要的一步,也是非常必须的,因为实例是它的一个起点,也是它的一个入口,只有我们创建一个 Vue 实例之后,我们...

    六小登登
  • Vue笔记:生命周期和钩子函数

    在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的。放大之,对vue的生命周期不甚了...

    朝雨忆轻尘
  • Vue生命周期

    这是Vue文档里关于实例生命周期的解释图 那么下面我们来进行测试一下 <section id="app-8"> {{data}} </section> ...

    蓓蕾心晴
  • Vue生命周期

    最近做项目使用的比较多的Vue框架,Vue 是一套用于构建用户界面的渐进式框架,熟悉它的生命周期可以让开发更好的进行。

    benny
  • vue生命周期

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

    跟着阿笨一起玩NET
  • Vue生命周期

    Vue实例需要经过创建、初始化数据、编译模板、挂载DOM、渲染、更新、渲染、卸载等一系列过程,这个过程就是Vue的生命周期,在Vue的整个生命周期中提供很多钩子...

    WindrunnerMax
  • vue生命周期

    生命周期?何为生命周期?表示一个程序的初始化以及程序结束经过的流程!接下来看一下Vue官方实例的声明周期图示!

    十月梦想
  • Vue生命周期

    Vue在GitHub上面的star数量已经超过了react,虽然npm包下载的数量还没有react多,但是Vue上升的势头真的很猛。

    wade
  • Vue生命周期

    在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注册的js方法控制整个大局,在这些事件响应方法中的this直...

    yaphetsfang
  • VUE生命周期

    每一个vue组件都是有生命周期的,通过其生命周期,我们可以在其中初始化数据和销毁数据的操作。每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是v...

    OECOM
  • vue 生命周期

    Vue.js 实例生命周期(原图出自于Vue.js 官网),如图2-2 所示。 init: 在实例开始初始化时同步调用。此时数据观测、事件等都尚未初始化。2....

    用户5760343
  • Vue 生命周期

    这里,beforeCreate() 和 created() 两个生命周期方法依次被执行,而其它生命周期方法没被触发执行。

    Leophen
  • vue --- 生命周期

    另外在标红处,我们能发现 el 还是 {{message}},这里就是应用的 Virtual DOM(虚拟Dom)技术,先把坑占住了。到后面mounted挂载的...

    小蔚
  • Vue学习1:实例及生命周期

    用户1149564
  • React 学习笔记之状态(state)和生命周期

    本文中我们同样使用 React 官方教程中的一个时钟的案例来给大家讲解 state 的作用及时生命周期中的一些接口函数。案例可能与官方不是很匹配,是因为我经过刻...

    我与梦想有个约会
  • Spring源码学习笔记(8)——Bean的生命周期

    Bean的声明周期是指Bean从创建、初始化到销毁的整个过程。在Spring中,Bean的生命周期都是交给IoC容器管理的。Bean的主要生命周期主要有四个阶段...

    张申傲

扫码关注云+社区

领取腾讯云代金券