页面生命周期onLoad和onReady在vue3组合式api中的使用

于 2024-09-05 16:04:10 发布
阅读量364 收藏 2
点赞数 16
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ou050719/article/details/141932879
版权

onLoad

监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参)

下面是使用案列

一个demo6页面

运行页面

另一个页面demo5,一个可以跳转到demo6 navigator 的组件

在url后面定义了一个name和age,也就是把这两个东西传给demo6

demo6如何接受demo5传过来的值

使用oLoad函数就可以接收,定义的变量name.value=传过来的name,age也是一样,从demo5跳转的demo6的时候就可以拿到值并赋给demo6的name和age

onReady

监听页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用，注意如果渲染速度快，会在页面进入动画完成前触发

暮夜明
关注
  • 16
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
生命周期onLoad和onReady在vue3组合式api中的使用以及onShow和onHide在钩子中的对比和顺序
dengshuweng的博客
09-05 1290
我们在使用我们的onLoad时，并不可以直接的使用我们的onLoad需要先导入我们的onLoad，因为我们没有导入我们的onload时而直接进行使用是会发生错误的，因为此时的onLoad是并没有在我们的生命周期里面的，所以直接使用会发生错误。因此我们在使用onLoad是需要导入我们的这个与我们的ref导入类似，我们导入完成之再次到我们的页面中进行查看。我们也可以在onLoad里面来修改我们的值由此可见我们的onLoad可以用来对我们的定义的变量或者常量的value进行修改，从而改变我们在页面显示的值。
页面生命周期onLoad,onReady,onShow和onHide在vue3中组合应用
最新发布
p23gjj的博客
09-04 457
生命周期onLoad函数作用可以进行传参。
uniapp 使用Vue3 setup组合式API 引入 uniapp 的 页面生命周期（onReachBottom）等方法
leaf的博客
12-10 9886
uniapp 使用Vue3 setup组合式API 引入 uniapp 的 页面生命周期（onReachBottom）等方法
uniapp页面声明周期及Vue3版本组合式生命周期钩子
Waitfor_Me的博客
09-02 221
我们从视频中可以看出，在我们没有挂载前是拿不到组件的信息的，因为那时候的组件还是虚拟的，在我们挂载后组件就变成了真实的了，所以我们可以拿到组件的信息，并且我设置了一个3秒后删除组件，在我们的组件删除后，我们可以做一些资源的释放、关闭定时器之类的操作。onBeforeUpdate(更新前)：在组件的数据发生变化之前执行的回调函数。onBeforeMount(挂在前)：在组件还没有挂载之前执行的回调函数。onUpdated(更新后)：在组件的数据发生改变的时候执行的回调函数。挂在前、挂载后、销毁后。
uniappVue3版本中组件生命周期和页面生命周期的详细介绍
qq_18798149的博客
01-05 6834
生命周期有多重叫法，有叫生命周期函数的，也有叫生命周期钩子的，还有钩子函数的，其实都是代表，在 Vue 实例创建、更新和销毁的不同阶段触发的一组钩子函数，这些生命周期函数允许开发者在不同阶段对 Vue 实例进行操作，以便执行特定的逻辑或清理工作。
uni-app学习--生命周期和API
weixin_47938715的博客
07-28 658
uni-app生命周期
开发uniapp使用Vue3组合式API版本，如何实现从vue模块中自动导入
qq_18798149的博客
01-06 6403
在常规开发uniappVue3的项目时，需要用到ref、computed等需要每次都手动import导入，使用unplugin-auto-import插件就可以免去每次导入的步骤。
【Vue】 API 风格
小数点儿_
10-22 1204
相应的，它的灵活性也使得组织和重用逻辑的模式变得更加强大。以“组件实例”的概念为中心 (即上述例子中的 this)，对于有面向对象语言背景的用户来说，这通常与基于类的心智模型更为一致。当你不需要使用构建工具，或者打算主要在低复杂度的场景中使用 Vue，例如渐进增强的应用场景，推荐采用选项式 API。实际上，选项式 API 是在组合式 API 的基础上实现的！关于 Vue 的基础概念和知识在它们之间都是通用的。// data() 返回的属性将会成为响应式的状态, 并且暴露在 `this` 上。
uniapp+vue3面试纪要
weixin_44575130的博客
01-15 722
3.uniApp如何实现页面的下拉刷新和上拉加载更多。5.如何修改node_modules包。2.vue3 h函数 创建虚拟节点。3.vue3 页面之间有哪些通信方式。2.uniapp 图片实现懒加载。4.uniapp中微信登录的流程。5.uniapp条件注释的语法。1.vue3与vue2的区别。1.uniapp的生命周期。6.uniapp分包小程序。4.vue3的生命周期。
uniapp api学习页面生命周期，应用生命周期
weixin_42262889的博客
04-04 1665
生命周期，有页面生命周期，这个应用生命周期 相当于一个人从生到死有什么 生命周期可以利用很多 运行顺利 onLoad :({ }); onShow: ({ }); 当用户操作的时候会自动触发相应函数 onReady: ({}); onUnload: ({}); 应用生命周期： uni-app 支持如下应用生命周期函数： 函数名 说明 onLaunch 当uni...
vue2 vue3 js es6 html css 知识点
weixin_71783532的博客
08-03 1013
生命周期函数 又叫钩子函数 是到了某一个时间点会自动触发 我们讨论的是 vue 实例的钩子函数 从 vue 实例创建到销毁的过程中 到了一定的时间节点就会触发是 ECMAScript 的第六个版本 在 es5 的基础上新增加了一些语法 js 分成三部分 dom（文档对象模型） bom（浏览器对象模型） ECMAScript（js 语法）1.JavaScript（以下简称 js）的数据类型分为两种：原始类型（即基本数据类型）和对象类型（即引用数据类型）；...
笔记,前端重点 js,es6,vue2,vue3,小程序...... (记得收藏)
qq_61686552的博客
06-16 790
前端 重点，重点，重点
关于js和vue以及项目搭建的相关问题
weixin_43689726的博客
08-08 574
关于js，vue,以及项目搭建和跨域等问题
面试分析-HTML-CSS-JS-VUE
m0_50125215的博客
09-11 276
-------------基础-------------- 1、H5新特性： 拖拽(抓取对象以后可以拖到另一个位置) data-属性 语义化标签(header、footer、nav、aside等) 视频音频(video、audio) canvas 本地存储(localStorage、sessionStorage)等 2、C3新特性： 边框圆角 box-sizing rgba颜色 渐变 过渡 动画 2D转换 3D转换 flex布局 字体图标等 3、三种存储方式对比： localStorage：长期存
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 2507
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
vue3使用-watch监听总结
weixin_44072254的博客
09-01 491
{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。监听数组的方式-示例。
标签中的ref属性
qq_40792800的博客
09-04 525
可能存在的情况是，在挂载之前，ref() 函数已经执行，此时获取的引用则是undefined，在挂载之后，Vue 底层会自动找到对应的 ref() 与 经过ref 标记的DOM或组件，并赋值给 Value属性。1、在标签中添加 ref 属性的同时，需要在 脚本中 通过 ref() 函数定义一个容器来放置 给ref属性打上标签的DOM或组件实例，且接收的变量需要 与 标签中的ref 属性值相同。按照Vue2 的情况，此时在父组件中是可以访问到子组件中的数据的，但是通过打印，我们发现什么都没拿到。
vue3+vant4父组件点击提交并校验子组件form表单
liuzaixi的博客
08-30 484
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
vue3 组合式api 使用cropperjs
12-10
根据提供的引用内容，我们可以使用Vue3的组合式API和CropperJS库来实现图片裁剪。下面是一个简单的示例代码： ```html <template> <div> <input type="file" @change="onFileChange" /> <img ref="image" :src="imageUrl" /> </div> </template> <script> import { ref, onMounted } from 'vue'; import Cropper from 'cropperjs'; export default { setup() { const imageUrl = ref(''); let cropper = null; const onFileChange = (event) => { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = (e) => { imageUrl.value = e.target.result; }; reader.readAsDataURL(file); }; onMounted(() => { cropper = new Cropper(refs.image, { aspectRatio: 1, viewMode: 1, }); }); const cropImage = () => { const canvas = cropper.getCroppedCanvas(); const croppedImageUrl = canvas.toDataURL(); imageUrl.value = croppedImageUrl; }; return { imageUrl, onFileChange, cropImage, }; }, }; </script> ``` 在这个示例中，我们首先引入了CropperJS库，并在组件的setup函数中使用了Vue3的组合式API。我们使用了ref来创建了一个响应式的imageUrl变量，用于存储图片的URL。我们还使用了onMounted钩子函数来初始化CropperJS实例，并将其绑定到img元素上。在onFileChange函数中，我们使用FileReader API来读取用户选择的文件，并将其转换为DataURL格式，以便在img元素中显示。最后，我们还定义了一个cropImage函数，用于裁剪图片并更新imageUrl变量。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值