美文网首页
聊聊 Vue 生命周期的那些事

聊聊 Vue 生命周期的那些事

作者: 酷酷的凯先生 | 来源:发表于2020-06-10 10:53 被阅读0次
什么是vue生命周期?

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

vue生命周期的作用是什么?

它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

vue生命周期总共有几个阶段?

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

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

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

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

(5).beforeUpdate(更新前) 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。

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

(7).beforeDestroy(销毁前) 在实例销毁之前调用。实例仍然完全可用。

(8).destroyed(销毁后) 在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

第一次页面加载会触发哪几个钩子?

会触发 下面这几个beforeCreate, created, beforeMount, mounted。

DOM 渲染在 哪个周期中就已经完成?

DOM 渲染在 mounted 中就已经完成了。

相关文章

  • 聊聊 Vue 生命周期的那些事

    什么是vue生命周期? Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom...

  • Vue组件命名的一些问题

    原文:聊聊 Vue 组件命名那些事 组件注册 我们以一个最简单的例子来研究 Vue 组件的注册过程: 通过跟踪代码...

  • vue生命周期

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

  • vue生命周期

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

  • Vue生命周期

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

  • 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/fayutktx.html