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

原创 已于 2022-07-27 22:21:34 修改 · 324 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

于 2022-07-22 11:42:54 首次发布
本文详细介绍了Vue.js的生命周期，包括beforeCreate、created、beforeMount、mounted、beforeDestroy和destroyed等阶段，以及在不同阶段的数据初始化、DOM操作和组件销毁的注意事项。重点讨论了如何在mounted阶段通过$nextTick或setTimeout处理DOM操作，并在beforeDestroy和destroyed阶段进行资源清理。此外，文章还提及了Vue3中销毁函数变为unmounted的变动。

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)

rich_c
关注
初识Vue-生命周期函数（详解如何让组件在不同阶段执行相应操作）
百赢出品，必属精品
05-06 1693
生命周期函数是在Vue组件生命周期中的特定时间点执行的函数。Vue实例有一个完整的生命周期，从创建、挂载、更新到销毁。在这个过程中，Vue提供了一系列的钩子函数，让你能够在特定阶段执行自定义逻辑。生命周期函数是在Vue组件实例化、挂载、更新、销毁等不同阶段触发的钩子函数，用于执行特定的操作。: 在实例初始化之后，数据观测 (data observer) 和事件配置 (event/watcher setup) 之前被调用。在这个阶段，组件实例的选项对象已经被处理，但实例的数据和方法尚未初始化。created。
超详细vue生命周期解析(详解)
热门推荐
weixin_42707287的博客
12-25 13万+
vue是每一个前端开发人员都绕不过的一个技术，在国内的市场占有量也是非常的大，我们大部分人用着vue, 却不知道他内部其实经历了一些什么。每个生命周期又是什么时候开始执行的。我们今天来详细的看一看 首先，生命周期是个啥？ 借用官网的一句话就是：每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。那么这些过程中，具体vue做了些啥，我们今天来了解一下。 语述 了解之前，我们先贴上一张官网的.
【vue设计与实现】挂载和更新 4-卸载操作&区分vnode的类型
loyd3的博客
08-04 1032
就比如说，初次渲染的vnode是一个p元素，后续又渲染了一个input元素，这就会造成新旧vnode描述的内容不同，即vnode.type属性的值不同。从上面的代码可以看到，调用createElement函数创建真实DOM元素时，会把真实DOM元素赋值给vnode.el属性，这样就在vnode和真实DOM元素之间建立了联系，因此有了这些只需要根据虚拟节点对象。如果后续渲染时，为render函数传递了新的vnode，则不会进行卸载操作，而是把新旧vnode都传递给patch函数进行。更新的情况有好几种，...
vue面试题（持续更新）
weixin_67642008的博客
09-15 904
vue面试题
vue的卸载
syt5324165的博客
10-24 1万+
执行命令：vue -V 提示：‘vue’ 不是内部或外部命令，也不是可运行的程序。
VUE基础知识一：生命周期函数和常用指令
IT-CRUD
06-29 1819
概念：在生命周期中的某一时刻自动执行的函数beforeCreated：在实例生成之前会自动执行的函数created：在实例生成之后会自动执行beforeMount：在组件内容被渲染到页面之前自动执行的函数mounted：在组件内容被渲染到页面之后自动执行的函数beforeUpdate：当data内的数据发生变化时会立即自动执行的函数updated：当data内的数据发生变化，且已经在页面渲染后，会自动执行的函数beforeUnmount：当页面中存在dom对象失效时，自动执行的函数unmounted：当页面
Vue2和Vue3的生命周期一起执行的顺序
前端界的小学生
10-05 2140
Vue2和Vue3的生命周期一起执行的顺序
Vue3基础知识-生命周期函数onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted
最新发布
2503_91308956的博客
09-14 1259
Vue3生命周期函数onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted
Vue实战之Vue生命周期
9.冄2.7.號的博客
07-29 446
Vue 生命周期 Vue实例生命周期 ===> Java对象生命周期（初始化阶段 运行阶段 销毁阶段） 生命周期钩子 ===> 生命周期函数 vue实例从创建到销毁的过程中自动触发一系列函数 ===> Vue生命周期函数（钩子） 代码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue系列课程</title&
uniapp vue3生命周期函数
03-29
好的，我现在需要回答用户关于UniApp中Vue3生命周期函数的使用说明及示例的问题。首先，我得回想一下UniApp和Vue3的相关知识。用户提到了站内引用，里面提到了应用级和页面级的生命周期钩子，还有组合式API的使用。...
Web前端之Vue的生命周期、onUnmounted、deactivated、keepAlive、unmounted、activated
优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/
05-25 2430
Web前端之Vue的生命周期、onUnmounted、deactivated、keepAlive、unmounted、activated
Vue修炼系列教程 - 筑基篇5
hhzzcc_的博客
02-21 946
上一章主要讲了vue主要的生命周期mounted和Unmounted以及常用修饰符stop和prevent的场景使用，今天主要学习vue中ref(这里的ref和之前讲的使普通变量变成响应式变量不是同一个东西)的使用，以及v-model的使用
vue中的事件处理
lv_suri的博客
07-30 2451
lazy的效果就是可以将实时的给你变成不实时的。在默认的情况下，v-model在每次input事件触发后将输入框的值与数据进行同步。单文件组件，单文件组件（又称.vue文件,缩写是SFC）是一种特殊的文件格式，它允许将vue组件的模板、逻辑、与样式封装在单个文件中。组件与组件之间是需要存在交互的否则完全没有关系，组件意义就很小了。attribute,同时也可以决定组件与组件之间的传递。（2）APP.vue根组件文件代码。（2）APP.vue根组件文件代码。七，是props组件交互。.............
你真的会使用Vue3的onMounted钩子函数吗？Vue3中onMounted的用法详解
RenGJ010617的博客
05-25 2万+
onMounted作为vue3中最常用的钩子函数之一，能够灵活、随心应手的使用是每个Vue开发者的必修课，同时根据其不同写法的特性，来选择最合适最有利于维护的写法。
vue 生命周期
qq_52963857的博客
06-16 936
vue 生命周期，人的-生命周期，1. 钩子函数2. 初始化阶段3. 挂载阶段4. 更新阶段5. 销毁阶段
vue学习笔记day3——组件高级
weixin_42833736的博客
08-24 453
vue组件高级：监听器，组件生命周期，数据共享、插槽等。黑马课程学习笔记
前端必知必会-Vue ‘unmounted‘ 生命周期钩子
qq_24018193的博客
02-21 581
本文介绍了Vue ‘unmounted’ 生命周期钩子的使用，如有问题欢迎私信和评论。
Vue选项式 API 的生命周期选项和组合式 API
开源世界
04-06 1776
Vue2、Vue3 生命周期的变化 正好在看Vue的官方文档，也正好比对一下，做一下笔记 选项式 API 的生命周期选项的变化 这里我们会发现Vue3对Vue2的生命周期钩子似乎没有做大的调整 修改 destroyed 生命周期选项被重命名为 unmounted beforeDestroy 生命周期选项被重命名为 beforeUnmount 新增 errorCaptured：在捕获一个来自后代组件的错误时被调用。 renderTracked：跟踪虚拟 DOM 重新渲染时调用。 renderTriggere
理解Vue生命周期函数
paimonL的博客
05-12 340
生命周期函数：在某一时刻被自动执行的函数 刚创建一个Vue实例对象 刚创建，只是初始化生命周期函数和事件，只有一些默认的生命周期函数和默认的事件，其他的都未创建 2分析完后立即执行beforeCreate()函数 （实例生成之前，才初始化到一半，所以叫beforecreate()） 初始化data和methods，初始化数据和模板相关函数 执行created()函数 （实例已经创建完成，所以叫created()） 判断实例里是否存在template的选项，yes会把模板变成render函数，模板才能和数据
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值