美文网首页Web前端之路让前端飞技术干货
Vue入门系列(三)Vue实例的生命周期

Vue入门系列(三)Vue实例的生命周期

作者: 娜姐聊前端 | 来源:发表于2017-05-03 16:50 被阅读914次

Vue实例生命周期钩子函数与React非常相似,最明显的区别在于,它多了一个实例创建阶段。

Vue实例和Vue组件有着同样的生命周期函数。

参考官网图:

vue lifecycle.png

下面介绍Vue生命周期的每个阶段都做了些什么?

  1. beforeCreate: 创建了Vue组件实例,但是组件属性还未初始化。比如,data, elt等为undefined。
  2. created: 初始化数据对象和事件,例如:可以访问属性this.$data。这时最适合做ajax请求,初始化需要渲染的数据。
  3. beforeMount: 进行模板编译,但是,模板内容还未插入页面DOM中。
  4. mouted: 将生成好的的模板挂载在DOM树上,并且,组件属性this.$el被赋值。
  5. beforeUpdate: 组件更新之前
  6. updated: 组件更新之后
  7. beforeDestory: 组件销毁之前,这时,已经调用this.$destory()。
  8. destoryed: 组件销毁完毕。这时,组件上的watcher,子组件和事件监听都会被销毁。

下一节:Vue入门系列(四)Vue模板和指令

微信公众号:

相关文章

  • vue生命周期

    vue生命周期: 每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。 在Vue的...

  • vue生命周期

    vue生命周期:每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。

  • vue生命周期

    一 vue生命周期 Vue的生命周期:就是vue实例从创建到销毁的全过程 二 vue生命周期钩子 vue生命周期...

  • Vue

    Vue框架 一、Vue基础 添加Vue到网页(无需保存到本地) Vue生命周期 二、Vue 实例 创建Vue实例:...

  • Vue生命周期

    Vue生命周期 实例生命周期钩子 每个Vue实例在被创建时都要经过一系列的初始化过程。 8种钩子函数 before...

  • Vue生命周期详解

    什么是Vue的生命周期 先看一看官方文档对Vue生命周期的说明: 每个 Vue 实例在被创建时都要经过一系列的初始...

  • Vue.js入门(二):生命周期

    1 生命周期 Vue生命周期是Vue实例从创建到销毁的过程,就是生命周期。在Vue实例的生命周期过程中会运行生命周...

  • Vue生命周期和钩子函数及使用keeplive缓存页面不重新加载

    Vue生命周期每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期,在这个过程中会有...

  • 一、vue基础知识点

    每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: 实例生命周期钩子 每个 Vue 实例...

  • vue学习第二课之vue的生命周期

    vue生命周期图解: vue实例的生命周期 什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样...

网友评论

    本文标题:Vue入门系列(三)Vue实例的生命周期

    本文链接:https://www.haomeiwen.com/subject/qixhtxtx.html