美文网首页前端开发
谈谈vue生命周期

谈谈vue生命周期

作者: 年轻人不喝鸡汤 | 来源:发表于2019-11-03 14:30 被阅读0次

1.vue的生命周期是什么,先放上官方的图片

vue生命周期就是:在vue实例或者组件里面声明函数,在某一个时候回来回调这些函数

2.来解释生命周期:

beforeCreate(创建前):在数据观测和初始化事件还未开始

created(创建完成):完成数据观测,属性和方法的运算,初始化事件,$el属性还没有显示出来

beforeMount(载入前):  在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

mounted(载入后):  在el被新创建的vm.$el替换,并且载到实例上去之后调用,实例已经完成以下的配置:用编译好的html内容替换el属性指向的DOM对象,完成模板中的html渲染到html页面中,此过程中进行ajax交互

beforeUpdate(更新前):在数据更新之前调用,发生在虚拟DOM重新渲染之前,不会触发附加的重渲染过程。

update(更新后):在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用,调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作,然后在大多是情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环,该钩子在服务器端渲染期间不被调用

beforeDestroy(销毁前):在实例销毁之前调用,实例仍然完全可用,

这一步还可以用this来获取实例,

一般在这一步做一些重置的操作,比如清除掉组件中的定时器 和 监听的dom事件

destroy(销毁后):在实例销毁之后调用,调用后,所以的事件监听器会被移出,所有的子实例也会被销毁,该钩子在服务器端渲染期间不被调用

相关文章

  • 0725-vue的学习(一)

    一、VUE问题 (主要) 1.谈谈你对VUE的了解,它的优点都有哪些? 2.详细说下你对VUE中生命周期的8个钩子...

  • vue生命周期

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

  • vue生命周期

    vue生命周期详: vue生命周期详解图: vue生命周期详解代码展示:

  • Vue生命周期

    Vue生命周期详解 一、Vue生命周期 与 作用 (生命周期钩子就是生命周期函数) (1)Vue生命周期:每个Vu...

  • 谈谈vue生命周期

    1.vue的生命周期是什么,先放上官方的图片 vue生命周期就是:在vue实例或者组件里面声明函数,在某一个时候回...

  • vue3较vue2的特别之处 - 生命周期

    vue2 生命周期 vue3 生命周期 将 Vue2 的生命周期钩子代码更新到 Vue3 参考地址:https:/...

  • 前端之路-VUE面试题

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

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

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

  • vue生命周期

    vue里的生命周期是什么? vue实例从创建到销毁的过程称之为vue的生命周期 vue的生命周期各阶段都做了什么?...

  • Vue 生命周期

    vue里的生命周期是什么? vue实例从创建到销毁的过程称之为vue的生命周期 vue的生命周期各阶段都做了什么?...

网友评论

    本文标题:谈谈vue生命周期

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