Vue中的生命周期函数的特点

rich_c

已于 2022-07-27 22:21:34 修改

阅读量248

点赞数

文章标签： vue.js 前端 javascript

于 2022-07-22 11:42:54 首次发布

本文链接：https://blog.csdn.net/rich_c/article/details/125929024

版权

beforeCreate 创建之前：此时data和methods中的数据还没有初始化
created 创建完成： data和methods数据已经生成，但还不能操作dom，可以在mounted钩子函数中用$nextTick这个全局方法，或者setTimeout定时器在created中实现操作dom
beforeMount 挂载之前：有this，有数据，没有真实dom
mounted 挂载之后：已经完成了HTML虚拟化，创建了el节点可以操作dom，做数据修改会触发到updata生命钩子
beforeDestory 摧毁之前：整个vue都处在实时监控渲染和更新
destoryed 已经摧毁：已经摧毁了观察者，子元素和事件监听

ps：在vue3中，销毁函数（Destory ）改为卸载（unmounted)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

rich_c

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的生命周期函数的特点

介绍了vue2各个生命周期函数的特点
复制链接

扫一扫

Vue的生命周期函数详解

骑着蜗牛行天下

08-17

2104

Vue有一个完整的生命周期，也就是从开始创建，初始化创建，编译模板，挂载Dom，渲染–>更新–>渲染，销毁等一系列过程，我们称之为Vue的生命周期。通俗的说就是Vue实例从创建到销毁的过程，就是生命周期。每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化，运行中，销毁。 beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed 1.实例、组件通过new Vu

vue的生命周期函数

weixin_53690943的博客

03-15

182

路由钩子函数/导航守卫 1.全局–写在路由配置文件index.js中（全部路由变化）改变前：拦截操作 router.beforeEach:(ro,from,next)=>{ }; 改变后：获取路由信息 router.afterEach:(ro,from,next)=>{ }; 进入完成、解析：获取路由信息 2.组件内：写在组件内（当前组件涉及的路有变化）进入前：beforeRouteEnter:(to,from,next)=>{ }; 发生改变：befo

参与评论您还未登录，请先登录后发表或查看评论

vue面试题（持续更新）

weixin_67642008的博客

09-15

746

vue面试题

vue的卸载

05-25

1485

web前端之vue的生命周期、unmounted、onUnmounted、activated、deactivated、keep-alive

VUE基础知识一：生命周期函数和常用指令

IT-CRUD

06-29

1588

概念：在生命周期中的某一时刻自动执行的函数beforeCreated：在实例生成之前会自动执行的函数created：在实例生成之后会自动执行beforeMount：在组件内容被渲染到页面之前自动执行的函数mounted：在组件内容被渲染到页面之后自动执行的函数beforeUpdate：当data内的数据发生变化时会立即自动执行的函数updated：当data内的数据发生变化，且已经在页面渲染后，会自动执行的函数beforeUnmount：当页面中存在dom对象失效时，自动执行的函数unmounted：当页面

Vue2和Vue3的生命周期一起执行的顺序

前端界的小学生

10-05

2025

Vue2和Vue3的生命周期一起执行的顺序

vue中的事件处理

lv_suri的博客

07-30

2335

lazy的效果就是可以将实时的给你变成不实时的。在默认的情况下，v-model在每次input事件触发后将输入框的值与数据进行同步。单文件组件，单文件组件（又称.vue文件,缩写是SFC）是一种特殊的文件格式，它允许将vue组件的模板、逻辑、与样式封装在单个文件中。组件与组件之间是需要存在交互的否则完全没有关系，组件意义就很小了。attribute,同时也可以决定组件与组件之间的传递。（2）APP.vue根组件文件代码。（2）APP.vue根组件文件代码。七，是props组件交互。.............

Vue修炼系列教程 - 筑基篇5

hhzzcc_的博客

02-21

792

上一章主要讲了vue主要的生命周期mounted和Unmounted以及常用修饰符stop和prevent的场景使用，今天主要学习vue中ref(这里的ref和之前讲的使普通变量变成响应式变量不是同一个东西)的使用，以及v-model的使用

你真的会使用Vue3的onMounted钩子函数吗？Vue3中onMounted的用法详解

RenGJ010617的博客

05-25

8150

onMounted作为vue3中最常用的钩子函数之一，能够灵活、随心应手的使用是每个Vue开发者的必修课，同时根据其不同写法的特性，来选择最合适最有利于维护的写法。

Vue选项式 API 的生命周期选项和组合式 API

开源世界

04-06

1645

Vue2、Vue3 生命周期的变化正好在看Vue的官方文档，也正好比对一下，做一下笔记选项式 API 的生命周期选项的变化这里我们会发现Vue3对Vue2的生命周期钩子似乎没有做大的调整修改 destroyed 生命周期选项被重命名为 unmounted beforeDestroy 生命周期选项被重命名为 beforeUnmount 新增 errorCaptured：在捕获一个来自后代组件的错误时被调用。 renderTracked：跟踪虚拟 DOM 重新渲染时调用。 renderTriggere

vue学习笔记day3——组件高级

weixin_42833736的博客

08-24

253

vue组件高级：监听器，组件生命周期，数据共享、插槽等。黑马课程学习笔记

理解Vue生命周期函数

paimonL的博客

05-12

283

生命周期函数：在某一时刻被自动执行的函数刚创建一个Vue实例对象刚创建，只是初始化生命周期函数和事件，只有一些默认的生命周期函数和默认的事件，其他的都未创建 2分析完后立即执行beforeCreate()函数（实例生成之前，才初始化到一半，所以叫beforecreate()）初始化data和methods，初始化数据和模板相关函数执行created()函数（实例已经创建完成，所以叫created()）判断实例里是否存在template的选项，yes会把模板变成render函数，模板才能和数据

vue3生命周期详解

weixin_45357661的博客

05-01

4227

Vue3 的生命周期钩子函数

关于vue3生命周期的使用、了解以及用途（详细版）

老余的博客

02-22

1万+

每一个Vue组件实例在创建时都需要经历一系列的初始化步骤，比如数据侦听，编译模板，挂载实例到DOM，以及在数据改变时更新DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。最常用的是created、mounted、updated和unmounted。可以监听某一类型的改变而执行某项操作。跟vue2并没有太多不同之处Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。

vue3 第三幕之【生命周期函数】(挂载篇+更新篇+卸载篇)

XSL_HR的博客

09-22

4787

关于vue3生命周期挂载更新卸载过程的详细分析总结

vue-vue3(5)-生命周期+自定义hook函数+toRef(toRefs)

飘然渡沧海的博客

12-13

851

vue-vue3(5)-生命周期 vue2的声明周期视图 vue3的声明周期视图两个被更名： beforeDestroy改名为 beforeUnmount destroyed改名为 unmounted Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下： beforeCreate===>setup() created=======>setup() beforeMount ===>onBeforeMount mounte

[Vue] 5.Vue的生命周期函数

u014627255的博客

05-25

451

一、生命周期函数：在某一时刻会自动执行的函数 beforeCreate(): 分析的代码中的事件以及生命周期函数代码后，第一个执行即在实例生成之前执行（after init events & lifecycle） created(): 分析完数据以及模板之间绑定的内容后执行即在实例生成之后执行 (after init injections & reactivity) beforeMount(): 如果有template，Vue会把template变成render函数，beforMount(

vue生命周期的特点

08-27

Vue 生命周期的特点如下： 1. 创建阶段（Creation）：在这个阶段，Vue 实例被创建，需要进行初始化配置和数据观测等操作。 2. 挂载阶段（Mounting）：在这个阶段，Vue 实例将模板编译成虚拟 DOM，并将其挂载到页面的实际 DOM 上。 3. 更新阶段（Updating）：在这个阶段，当数据发生改变时，Vue 实例会根据响应式规则重新渲染虚拟 DOM，并将其更新到实际 DOM 上。 4. 销毁阶段（Destroying）：在这个阶段，当 Vue 实例不再需要使用时，会进行销毁操作，释放相关资源。在每个阶段中，Vue 提供了一系列的生命周期钩子函数，开发者可以通过这些钩子函数来执行自定义的逻辑操作。常用的生命周期钩子函数包括 created、mounted、updated 和 destroyed 等。这些钩子函数可以在不同阶段执行相应的代码，以满足业务需求。需要注意的是，Vue 3.x 版本中的生命周期钩子函数发生了变化，取消了之前版本中的 beforeCreate 和 beforeDestroy 钩子函数，新增了两个新的钩子函数：beforeMount 和 beforeUpdate。此外，Vue 3.x 还引入了 Composition API，提供了更灵活和组合性的方式来处理组件逻辑。