【vue3练习 -08】vue3生命周期

已于 2023-10-07 11:18:24 修改
阅读量74 收藏
点赞数
分类专栏： vue3 文章标签： 前端 javascript 开发语言
于 2022-08-30 23:07:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52941842/article/details/126614659
版权

与vue2基本唯一的区别在于组件销毁的时候变了，不叫销毁了而是叫卸载了，还有一点就是生命周期可以通过引入来实现

名字变化：

vue2是叫beforeDestroy（销毁之前）跟destroyed（销毁之后）

vue3的钩子分别是beforeUnmount（卸载之前）跟unmounted（卸载之后）

依然可以通过正常配置项写在与setup同级的地方

如果通过引入的方式则需要在生命周期函数前面加个on,如挂载叫onMounted,挂载之前叫onBeforeMount,但是需要注意的是创建那两个钩子没有了，因为被setup顶替掉了，setup会在所有的生命周期之前执行，然后生命周期函数需要传递一个回调函数作为参数

蕉君桑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 生命周期(详情版 面试题+代码)
weixin_59519449的博客
01-12 533
1.什么是生命周期? 生命周期： 是指一个事物从产生，到最后消亡的整个过程; vue：vue 实例 组件的生命周期： 实例，从创建到消毁的整个过程； 在不同的生命周期，可以执行不同的操作； 2.beforeupdate 和 updated 的区别是什么？ ...
Vue生命周期
weixin_45077672的博客
08-04 210
/* 常用的生命周期钩子： 1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。 2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。 关于销毁Vue实例 1.销毁后借助Vue开发者工具看不到任何信息。 2.销毁后自定义事件会失效，但原生DOM事件依然有效。 3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。 */ beforeCreate.
Vue生命周期测试
qq_44932835的博客
01-29 205
读懂这张图搞懂两个单词就好了： ①render：渲染，指把要在浏览器显示的内容（也就是要挂载的内容）准备好。 ②mounted：挂载，指把准备好的要显示的内容显示出来。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>vuejs生命周期</title> <script src="js/vuejs-2.5.16.js">&l.
Vue生命周期函数相关——笔试/面试题
qq_56668869的博客
09-04 285
Vue生命周期函数相关笔试/面试题
第5章-Vue.js交互及生命周期练习
weixin_34358092的博客
09-07 363
一、学习目标 使用网络请求进行前后端交互 (重点) 理解钩子函数的作用 （难点） 掌握Vue.js过滤器的使用方法 了解Vue.js事件的深入用法 (重点) 二、仿写留言板 2.1、实现"显示评论"按钮的功能 使用网络请求，请求"请求列表" 数据 解析 "评论列表" 数据 展示"评论列表的数据" 2.2、点击显示评论，显示数据 说明：当我们点击评论的时候，...
vue-examples:vue练习
04-01
"vue-examples:vue练习"这个标题表明这是一个关于Vue.js的实践项目，旨在帮助开发者通过实际操作来学习和掌握Vue.js的核心概念和特性。 描述中的“例子”和“vue练习”进一步确认了这是一个学习资源，包含一系列Vue...
vue3+ts入门（todolist案例）
02-10
- **生命周期钩子**：理解 Vue3 的生命周期钩子，如 `onMounted`、`onUpdated` 和 `onBeforeUnmount`，并在合适的地方进行初始化、更新或清理操作。 4. **Vue3 的配置**： - **安装 Vue3 和 TypeScript**：使用 `...
Vue---Exercises:练习
03-18
9. **生命周期钩子**：每个Vue组件都有一个生命周期，包括创建、挂载、更新和销毁阶段。理解这些生命周期钩子函数，如`created`、`mounted`、`updated`和`destroyed`，可以帮助你更好地控制组件的行为。 通过这些...
vue学习笔记，学习vue从0-1的步骤
09-21
组件可以被视为独立的可复用的UI部分，有自己的数据、方法和生命周期。通过组合组件，可以构建复杂的用户界面。`export default`用于导出组件，而`import`则用于引入组件。 3. **Vuex**：Vuex是Vue的状态管理库，...
hello-vue3.zip
11-24
9. **Composition API中的生命周期钩子**：Vue3的生命周期钩子进行了调整，如`beforeCreate`和`created`合并为`onBeforeMount`，`beforeDestroy`和`destroyed`合并为`onBeforeUnmount`等，同时新增了`onMounted`、`...
Vue高频面试题三——生命周期函数
qq_56989560的博客
04-10 782
详解VUE中生命周期函数和相关面试题，一看就会
vue3的生命周期
qq_44472790的博客
10-10 1115
1.vue3将不在使用beforeDestroy和destroyed 2个钩子 beforeDestroy 替换成 beforeUnmount destroyed 替换成 unmounted 2.vue2 => vue3 的生命周期钩子对应关系（图为准） 常用的可复制 beforeCreate|created => setup beforeMount => onBeforeMount mounted => onMounted beforeUpdate => onBefore
vue2和vue3的生命周期（区别以及执行顺序）
最新发布
weixin_72081046的博客
04-13 3053
此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。同一个阶段的生命周期Vue3先执行，后执行vue2生命周期，然后再执行下一个阶段的生命周期。– 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。– 在卸载组件实例之前调用。修改父组件的数据后触发父组件的。修改子组件的数据后触发子组件的。
Vue3的生命周期的使用
热门推荐
m0_56219678的博客
02-11 1万+
Vue3生命周期与vue2生命周期的区别，以及vue3生命周期组合式API的写法
vue3路由跳转时不触发beforeDestroy
rayshaan0123的博客
08-10 6456
网上都说是keep-alive，但项目里没用keep-alive 原因：vue增加了新的生命周期 beforeCreate -> setup() created -> setup() beforeMount -> onBeforeMount mounted -> onMounted beforeUpdate -> onBeforeUpdate updated -> onUpdated beforeDestroy -> onBeforeUnmount destro
vue3 开发总结
supming1的专栏
11-25 3876
本文是vue3官方文档的提炼和总结，主要是记录vue3开发常用到的知识点，方便后续开发的时候查询，避免一段时间没开发之后遗忘了，又需要重新看官网，比较费时。
vue3入门知识点
www658的博客
08-10 1263
vue3初级知识点！干货！
初学Vue（全家桶）-第19天（vue3）：计算属性、监视属性、vue3生命周期
lalala_dxf的博客
06-26 401
功能和vue2中的一样，只是写法上有些许区别，但vue3目前仍可以使用vue2中的写法，不过不推荐。 vue3中计算属性的使用具体看例子，不赘述了 vue3中watch和vue2中的使用方式很相似。 2.3 watchEffect函数 watch的套路是既要指名监视的属性，也要指明监视的回调 watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。 watchEffect有点像computed： 区别在于computed注重的是计算出来的值（回调函数的返回值）

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值