美文网首页
vue 实例的生命周期

vue 实例的生命周期

作者: 回调的幸福时光 | 来源:发表于2017-05-24 23:32 被阅读160次

前言

以前忽略的一句话

每个vue.js应用都是通过函数vue创建一个vue的根实例启动的。

在实例化vue时,需要传入一个选项对象,它可以包含数据(data)、模板(template)、挂载元素(el)、方法(methods)、生命周期钩子(life cyclehook)等选项。

var vm = new Vue({
 // 我就是选项对象
})

生命周期

每个vue实例在被创建之前都要经过一系列的初始化过程。例如,实例要配置数据监测(data observer)、编译模板、挂载实例到dom,然后在数据变化时更新dom。

vue 声明周期
钩子函数 含义
beforeCreate 在实例初始化之后,数据监测(data observer)和init events事件配置之前被调用。
此时组件的选项还未挂载,因此无法访问data,methods等
created 实例已经被创建之后调用,$el还不可见。
实例已完成以下的配置:数据监测(data observer),event/watch事件回调,属性和方法的运算。
beforeMount 挂载之前调用,相关的render第一次被调用。
mounted el被新创建的vm.$el替换,并挂载到实例上之后,才调用该钩子函数。
如果根实例挂载了一个文档内元素,当mounted被调用时,vm.el也在文档内。
beforeUpdate 数据更新时调用,发生在virtual dom重新渲染和打补丁之前。
可以在这个钩子中进一步的更改状态,这不会触发附加的重渲染过程。
updated 由于数据更改导致的虚拟dom重新渲染和打补丁,在上述操作之后调用此钩子函数。
这个钩子函数调用之前,组件dom已经更新,所以现在可以执行依赖dom的操作。
在此期间尽量避免更新状态,否则将导致更新无限循环。
beforeDestroy 实例销毁之前调用,实例仍然可用。
可以用this获取实例。
重置操作可在此执行,例如:清除定时器,监听事件
destroyed Vue实例销毁后调用。
调用后,Vue实例指示的所有东西都会解绑,所有的事件监听器都会移除,所有的子实例也会被销毁。

demo

这位仁兄的例子lucius's blog

相关文章

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

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

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

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

  • vue生命周期

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

  • 10、Vue_生命周期

    实例的生命周期 实例的生命周期图示(选项/生命周期钩子)实例生命周期 解释1.var v = new Vue{}:...

  • Vue生命周期

    vue生命周期 vue实例的创建到销毁的过程就是vue的生命周期,也就是实例创建-->初始化数据-->编译模板--...

  • 一、vue基础知识点

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

  • Vue

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

  • VUE实例生命周期钩子

    1、vue实例生命周期钩子的由来 每个vue应用都是通过vue函数创建一个新的vue实例开始的: vue实例再被创...

  • 前端之路-VUE面试题

    vue生命周期面试题vue 生命周期是什么? Vue 实例从创建到销毁的过程,就是生命周期 beforeCreat...

  • 2.Vue实例生命周期

    Vue实例有一个完整的生命周期,顾名思义就是指Vue实例从创建到销毁的过程。下面将借助官网上的Vue实例生命周期示...

网友评论

      本文标题:vue 实例的生命周期

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