vue生命周期总结

生命周期:

从创建到销毁的整个过程
所有的生命周期钩子函数自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着 你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文,因此 this 与你期待的 Vue 实例不同, this.fetchTodos 的行为未定义。

vue的生命周期共十一个阶段,

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
errorCaptured

主要分为四大阶段
  1. beforeCreate 类型Function
    创建之前
    实例已经被创建还没有完成,但是数据什么的还没准备好,不能去使用。
    在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
    //这个函数可以做lodding,加载图。(//lodding,jQuery里面有插件)
  2. created
    创建完成,可以拿到实例化里面的东西。
    实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
  3. beforeMount
    挂载之前
    创建阶段实例没挂载不能找到dom元素,挂载阶段可以,
    只是把实例挂载,里面的data数据并没有做解析
    在挂载开始之前被调用:相关的 render 函数首次被调用。
    该钩子在服务器端渲染期间不被调用。
  4. mounted
    挂载之后
    解析完成,可以拿到完整的dom节点
    //可以做请求数据,在这里修改数据,可以拿到最新的dom。
    //请求到数据,同时可以关闭lodding。
    el 被新创建的 vm. e l 替 换 , 并 挂 载 到 实 例 上 去 之 后 调 用 该 钩 子 。 如 果 r o o t 实 例 挂 载 了 一 个 文 档 内 元 素 , 当 m o u n t e d 被 调 用 时 v m . el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm. elrootmountedvm.el 也在文档内。
    该钩子在服务器端渲染期间不被调用。
  5. beforeUpdate
    更新之前
    组件变更才会触发
    更新之前dom还没有被解析
    数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
    你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
    该钩子在服务器端渲染期间不被调用。
  6. updated
    更新完成
    更新完成dom已经被解析
    由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
    当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。
    该钩子在服务器端渲染期间不被调用。
  7. beforeDestroy
    销毁之前
    必须要销毁才会执行
    实例销毁之前调用。在这一步,实例仍然完全可用。
    该钩子在服务器端渲染期间不被调用。
  8. destroyed this.$destroy()//数据行为与实例解绑
    销毁之后
    销毁的是数据事件行为和实例化对象做了解绑
    Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
    该钩子在服务器端渲染期间不被调用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值