vue2生命周期

已于 2024-07-09 14:27:27 修改
阅读量220 收藏
点赞数 2
分类专栏： vue2 文章标签： vue.js javascript 前端
于 2024-07-09 14:27:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62388064/article/details/140294962
版权

生命周期

四个阶段：

  • 创建：创建响应式数据
  • 挂载：渲染模板
  • 更新：修改数据，更新视图
  • 销毁：销毁vue实例

钩子函数：

在这里插入图片描述

一般情况下在create函数发送初始化渲染请求

在mounted开始可以操作DOM

beforeDestroy释放vue以外的资源，例如定时器、延时器

beforeCreate：响应式数据创建之前，vue实例还没创建

created： 响应式数据创建，vue实例创建完成，通常在此发送初始化请求

beforeMount：渲染模板之前，模板页面还没渲染完成

mounted：模板渲染完成，页面创建完成，可以获取DOM节点

beforeUpodate：视图数据更新之前，数据更新完成，但是视图数据还没更新完

updated：视图数据更新完成，数据也更新完成

beforeDestory：vue实例销毁前

destory：vue实例已经销毁

恸426
关注
专栏目录
Vue2生命周期详解
m0_71345904的博客
08-10 3007
常用的生命周期钩子： mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。 beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
vue2 生命周期详解
专注于web前端开发
05-04 4995
回到开头那个问题，new Vue()之后，发生了什么？，当数据发生变化之后又发生了什么？销毁呢？
vue3和vue2生命周期​
myStyle的博客
10-12 1742
在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等。
vue2生命周期详解
m0_61417250的博客
12-15 1849
vue对生命周期的理解以及认识
Vue3生命周期
热门推荐
m0_57341617的博客
08-19 11万+
vue3生命周期钩子函数，vue3和vue2钩子的变化
Vue学习总结——Vue2生命周期
qq_53008257的博客
04-26 2572
Vue2生命周期 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。 vue中每一个组件都会创建一个vue实例，这个实例从出生到死亡，经历的过程如下（官网给出） 生命周期函数（也叫生命周期勾子），用于在Vue实例 创建的生命周期的不同阶段，执行业务逻辑 。Vue2有8个生命周期钩子，都是成对出现： 分别是
Vue3与Vue2生命周期对比：新特性解析与差异探讨
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
12-21 1197
Vue3新版本的理念成型于 2018 年末，当时的 Vue 2 已经有两岁半了。比起通用软件的生命周期来这好像也没那么久，Vue3在2020年正式推出，在源码和API都有较大变化，性能得到了显著的提升，比Vue2.x快1.2~2倍。
Vue2-生命周期
qq_40792800的博客
06-23 9330
之前说完了Vue的基础知识，说了语法、数据代理、数据监听、计算属性、指令、过滤器等等，但是没有涉及到Vue的声明周期，其实之所以把生命周期放在后面讲，是因为，如果最开始讲生命周期，里面涉及到的概念性东西比较多，初学者不容易理解，只能死记硬背。但是在理解了前面的这些基础知识之后，回过头来理解生命周期，就会很方便了。 这就是 Vue 官网上的生命周期图，在这里 对每个生命周期以及每个模块都标注了tips，可以根据这些图例来辅助理解Vue的生命周期。 源起 new Vue() 当我们通过 new V
vue2生命周期函数及常用指令
qq_26942049的博客
07-23 1548
一、生命周期函数 1.beforeCreate 创建前执行（此时data和el都还未初始化，无法通过vm访问到data中的数据、methods中的方法）
Vue2生命周期图解（详细）
03-31
Vue2生命周期图解（详细）
vue2生命周期和vue3生命周期的区别
qq252750818的博客
05-12 6286
vue2常用生命周期： 创建前：beforeCreate() 只有一些实例本身的事件和生命周期函数 创建后：Created() 是最早使用data和methods中数据的钩子函数 挂载前：beforeMount() 指令已经解析完毕，内存中已经生成dom树 挂载后：Mounted() dom渲染完毕页面和内存的数据已经同步 更新前：beforeUptate() 当data的数据发生改变会执行这个钩子，内存中的数据是新的，页面是旧的 更新后：Updated() 内存和页面都是新的 销毁前：bef
Vue3生命周期及当Vue3与Vue2生命周期混用时的执行顺序
qq_37635012的博客
10-09 2727
Vue3生命周期及当Vue3与Vue2生命周期混用时的执行顺序
knowLedge-Vue I18n 是 Vue.js 的国际化插件
最新发布
2301_76671906的博客
09-30 551
Vue 2 中使用 Vue I18n 插件实现中英文切换
18 vue3之自动引入ref插件&深入使用v-model
qq_37550440的博客
09-25 547
TIps 在Vue3 v-model 是破坏性更新的 v-model在组件里面也是很重要的 v-model 其实是一个语法糖 通过props 和 emit组合而成的 默认值的改变 prop：value -> modelValue； 事件：input -> update:modelValue； v-bind 的 .sync 修饰符和组件的 model 选项已移除 新增 支持多个v-model 新增 支持自定义 修饰符 Modifiers
Thinkphp/Laravel基于vue的少数民族民歌网络图书馆管理系统
abo2022的博客
09-30 677
ThinkPHP是一个快速、简单的基于MVC和面向对象的轻量级PHP开发框架，遵循Apache2开源协议发布，从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，尤其注重开发体验和易用性，并且拥有众多的原创功能和特性，为WEB应用开发提供了强有力的支持Laravel非常的简洁并且是开源的，Laravel 是一个具有表现力、优雅语法的 Web 应用程序框架. Laravel 是构建现代全栈 Web 应用程序的最佳选择.
【开源免费】基于SpringBoot+Vue.JS校园资料分享平台（JAVA毕业设计）
customer08的博客
09-30 838
校园资料分享平台是一个B/S模式系统，采用Spring Boot框架作为开发技术，MYSQL数据库设计开发，充分保证系统的稳定性。系统具有界面清晰、操作简单，功能齐全的特点，使得校园资料分享平台管理工作系统化、规范化。
Vue3.0面试题汇总
qq_25741071的博客
09-29 748
实现 DOM 的方式进行 WebGL 编程。
Vue2生命周期钩子
03-29
Vue2生命周期钩子是在Vue实例的不同阶段执行的一组函数。这些钩子函数允许我们在特定的生命周期阶段执行自定义的逻辑。以下是Vue2的生命周期钩子及其执行顺序： 1. beforeCreate：在实例初始化之后，数据观测 (data...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

恸426

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值