VUE3.0从零开始-生命周期(3)

最新推荐文章于 2024-03-22 13:44:45 发布
最新推荐文章于 2024-03-22 13:44:45 发布
阅读量493 收藏
点赞数
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wo4641771/article/details/115915351
版权

1.与vue2版本不同点

与 2.x 版本生命周期相对应的组合式 API

beforeCreate -> 使用 setup()

created -> 使用 setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

errorCaptured -> onErrorCaptured

onRenderTracked  检查依赖被追踪。当render函数被调用时，会检查哪个响应式数据被收集依赖

onRenderTriggered 当执行update操作时，会检查哪个响应式数据导致组件重新渲染。

2.vue2.X版本的生命周期介绍可以看我的其他文章。

https://blog.csdn.net/wo4641771/article/details/115912850

3.演示

觉悟不晚的程序员
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 3.0学习笔记(从入门到精通)
10-07
vue 3.0自我学习整理的笔记，有很大的参考价值，包括了所有的知识点，vue的开发环境搭建、组件开发、数据状态管理、vue route、组件之前数据传递等有关知识点
Vue 基础
光头小小强007的博客
11-25 156
文章目录使用方式下载 vue.js 引入 官网地址：https://cn.vuejs.org/v2/guide/installation.html 使用方式 下载 vue.js 引入 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div i
vue threejs：Uncaught Error: OBJLoader: Unexpected line: “＜!DOCTYPE html＞“
wanyiba的专栏
01-08 2993
vue中使用three.js加载obj模型，报错： Uncaught Error: OBJLoader: Unexpected line: “＜!DOCTYPE html＞“ 很可能是模型放置路径不对，可以参考： https://blog.csdn.net/weixin_43228674/article/details/108277525 解决方法如下： 1.将模型放到public目录： public/threejs/models/test-obj.obj 2. 在代码中引用： thi
VUE3.0(一)：vue3.0简介
最新发布
chengcheng9876的博客
03-22 1952
VUE3.0(一)：vue3.0简介
html vue 中展示 obj 文件
@Yan*_*zeng博客
07-20 400
/groundColor: 0xFF0000, //此代码为灯光后颜色。
vue3.0 最全详细总结+案例
u013083465的专栏
05-30 7890
vue3.0 详细总结
vue3.0基本使用 详细说明！！！
热门推荐
^_^
07-14 2万+
一、vue3概述 （1）为什么要学习vue3 vue目前是前端框架中比较火热的，有了vue2为什么还要学习vue3呢，就像打游戏一样，为什么要升级呢，虽然公司大部分使用的还是vue2，还是有少部分公司使用vue3，提前了解使用vue3 也不是坏处 （2）vue3的新变化 1.性能提升，首次渲染更快，diff算法更快，内存占用更少，打包体积更小， 2.更好的Typescript支持(在vue下写TS更方便了) 3.提供新的写代码方式：Composition API (需要成本学习) （3
Vue3.0
vh_YUNYANGYUMO的博客
09-21 2954
基础简介 vue3.0版本于2020年9月18日晚11点半发布，更小、更快的全新体系不仅加强了typescript支持，开放了更多的底层功能，提高了可维护能力。 更小: 2.0采用的是面向对象编程的思想，3.0则采用函数是编程的思想，充分利用函数式编程组合大于继承的优势，采用函数式编程更利于逻辑功能的复用，webpack打包时更有利于tree-shaking，更利于代码的压缩，更利于返回值类型校验，压缩后的文件体积更小。 更快： 3.0修改了虚拟dom的算法(即diff算法 - 比对虚拟dom有没有变化);
Vue3.0基本概述
css_javascrpit的博客
04-05 1830
Vue3.0基本概述
vue3.0 vue-quill-editor.rar
09-19
vue3.0+vue-quill-editor+element富文本编辑引入可直接使用 可上传图片调整图片大小
Vue3.0-devtools-6.0.0-beta-7-Crx4Chrome.rar
04-12
Vue3.0 devtools 6.0.0 beta 7 ，Vue3.0 devtools调试工具
vue3.0-element-admin:基于vue3.0和element-plus开发的企业后台管理模板
03-30
element_vue3.0 / VE-Admin 项目简介基于vue3和element-plus开发的企业后台管理模板。功能特性项目使用了最新的vue3全家桶+元件加+ mockjs + Axios公司+ eChart5。项目继成了mockServe，可脱离后端自主开发测试对...
vue3.0-admin:vue3.0 +打字稿+ element-ui +后台系统
03-11
vue3-admin是一个后台管理系统的前端页面展示，是由vue-cli4和elemnet-ui实现的。功能原则。虽然刚开始看起来可能略感疲惫降低（由于子组件功能单一，所以内部通信中断），但是对后续的维护具有非常大的好处。项目...
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端）.zip
05-02
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+...
超简单的vue3.0，必看文档
WUYOU798的博客
02-24 1万+
1.vue概述 vue作者尤雨溪 尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，现任职阿里巴巴Weex团队。 2014年 Vue.js发布 2016年 Vue2.x发布 2022年 Vue3.x发布 2.vue的安装与使用 1.直接引用script <script src="https://unpkg.com/vue@next..
vue3.0与vue2.0的区别简记（基于官方文档）
start_sea的博客
06-06 2115
至于选哪一种好：看你自己，选哪种舒服就选哪种（~~）官方也是这么说（狗头保命。。。
vue3.0开发手册(实用版)
零凌林的博客
10-28 5899
本文根据同事整理的文档进行再归类,都是比较实用的vue3.0的语法,相信刚尝试vue3.0的开发者还是能学到不少东西的;详情可进入原文链接查看
【Vue】3.0 项目创建 自定义配置
weixin_52418790的博客
04-21 7490
1、进入项目路径 2、创建vue3项目 vue create +项目名称 注意：项目名称要避开特殊名字如echarts、vue等 3、项目配置 等待后弹出选项窗口，询问用户以什么模板方式进行安装 Default ([Vue 3] babel, eslint)：默认预设配置，会快速创建一个Vue2.0项目，提供了babel和eslint支持 Default ([Vue 2] babel, eslint)：默认预设配置，会快速创建一个Vue3.0项目，提供了babel和eslint支持 Manu
vue3.0中keep- alive生命周期使用
05-17
在 Vue 3.0 中，`keep-alive` 组件的生命周期钩子函数与 Vue 2.x 版本基本一致，但是由于 Vue 3.0 中对于组件实例的创建和销毁方式进行了优化，因此需要注意一些细节。 `keep-alive` 组件的生命周期包括 `activated` 和 `deactivated` 两个钩子函数。当 `keep-alive` 组件中的子组件被激活时，`activated` 钩子函数会被调用；当 `keep-alive` 组件中的子组件被停用时，`deactivated` 钩子函数会被调用。 下面是一个示例： ```html <template> <div> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </div> </template> <script> export default { activated() { console.log('activated') }, deactivated() { console.log('deactivated') } } </script> ``` 在这个示例中，我们使用了 `keep-alive` 组件来缓存某些路由页面。其中，`activated` 和 `deactivated` 钩子函数用于在缓存的页面被激活或停用时进行相应的操作，例如发送网络请求、更新数据等。 需要注意的是，由于 Vue 3.0 中对于组件实例的创建和销毁方式进行了优化，因此 `keep-alive` 组件中的子组件在被缓存时，并不会被销毁。因此，`keep-alive` 组件中的子组件不会触发 `created` 和 `beforeDestroy` 钩子函数，而是只会触发 `activated` 和 `deactivated` 钩子函数。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值