vue3 hooks碰到的问题

根据项目的需求，需要将获取报表id的方法写成一个hooks，在hooks是否使用监听watch，碰到了一系列的问题。在写hooks的时候，在hooks里面写了监听watch，写了一个响应式的数据，但是在页面上调用找个hooks的，响应式的数据写在setup内一直拿不到。
在此之前需要搞清楚一个问题：

watch在vue3中是什么时候执行的。

vue2生命周期与vue3生命周期相对比

vue2	vue3
beforeCreate	setup()
created	setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
activated	onActivated
deactivated	onDeactivated
errorCaptured	onErrorCaptured

监听watch在被触发的时候，是在beforeCreate 和created 之间被触发，进行初始化的，而setup在创建组件的时候是在beforeCreate 和created 之前执行的。

最初的写法:

export default async function useReport(busTypeId: any) {const route = useRoute();const report = ref();watch(() => busTypeId,async () => {if (isEmpty(busTypeId) || busTypeId == undefined) {busTypeId = route.path.split('/').slice(-1)[0];}const { createMessage } = useMessage();if (busTypeId?.length >= 19) {await getReportByBustypeId({ busTypeId }).then((res) => {report = res.id;}).catch((err) => {createMessage.error('获取信息失败' + err);});}},{ immediate: true,deep: true },);return { report };
}

页面引用：

<script lang="ts" setup>import useReport from '/@/views/busModel/report/useReport';const { report } = useReport ();console.log(report , 'report report 1');/**查询 */async function handleQuery() {try {console.log(report , 'report report 2');} catch (e) {console.log(e);}}</script>

这个时候写的看着也没有问题，但是就是在页面调用的时候无法获取到return出来的数据。在查询事件外边写的打印，打印的时候显示无数据，但是在查询里面写的就有数据。并且将监听事件直接写到页面上时，只有在监听事件内能拿到需要的数据，在外边就拿不到。这就是因为setup的执行是在beforeCreate 和created 之前执行的，而监听watch是在beforeCreate 和created 之间执行的，所以一直拿不到数据。

更改后的写法：

export default async function useReport(busTypeId: any) {const route = useRoute();const report = ref();if (isEmpty(busTypeId) || busTypeId == undefined) {busTypeId = route.path.split('/').slice(-1)[0];}const { createMessage } = useMessage();if (busTypeId?.length >= 19) {await getReportByBustypeId({ busTypeId }).then((res) => {report.value = res.id;}).catch((err) => {createMessage.error('获取报表信息失败' + err);});}return { report };
}

页面调用：

<script lang="ts">import useReport from '/@/views/busModel/report/useReport';const report = ref();onMounted(async () => {await useReport().then((res) => {report.value = res.report.value;});});
</script>

将监听watch去掉之后，这样就可以拿到想要的数据了。

vue3 hooks碰到的问题相关推荐

vue mixins（vue3 hooks）动态获取div高度
之前转载过一篇文章: https://blog.csdn.net/qq_37167049/article/details/103084927 可以动态计算div 高度,但是比较繁琐的痛点是: 需要在每 ...
《前端图形学实战》几何学在前端边界计算中的应用和原理分析
前言之所以会开设这个专栏, 是为了弥补部分程序员对代数和几何学的短板(当然也是为了巩固我的数学基础), 同时在实用价值上, 代数和几何学在编程界也起到了非常重要的推动作用, 比如我们看到的各种建模软 ...
Vue3必会技巧-自定义Hooks
Vue3自定义Hooks定义: 个人理解:一些可复用的方法像钩子一样挂着,可以随时被引入和调用以实现高内聚低耦合的目标,应该都能算是hook: 为什么Vue3要用自定义Hook?: 结论:就是为了让C ...
Vue3 生命周期Hooks函数与调度器Scheduler的原理
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群写在最前:本文章的目标 Vue3的生命周期的实现原理是比较简单的,但要理解整个Vue3的生命 ...
我居然不知道Vue3可以使用hooks函数实现代码复用？
每天都要开心(▽)哇: 项目开发过程中,我们会遇到一些情况,就是多个组件都可以重复使用的一部分代码逻辑,功能函数,我们想要复用,这可怎么办呢? VUE2我们是怎么做的呢? 在vue2 中有一个东西:M ...
如何在Vue3中使用Hooks
在Vue的options Api时代,mixins是我们抽离一个功能的重要手段,而在使用composition Api的Vue3时代,我们可以用hooks来实现类似mixins的功能. 相比mixin ...
vue3项目的创建和git提交规范，eslint ，cz，hooks
ESLint Commitizen Git Hooks (--forece 强制安装)` vue create (项目文件名) 选择 'Manually celect features' //手动配置 ...
在 react 里写 vue3 ? 还写了自定义 hooks和 Hoc 构建了响应式！
作者 |
我的项目用Vue3了，真香！
来源:代码与野兽 https://juejin.cn/post/6950487211368251399 背景近期在研发一套物联网设备管理系统,其主要用途是将公司旗下所负责智能园区中的硬件设备通过物联 ...

vue3 hooks碰到的问题

vue2生命周期与vue3生命周期相对比

vue3 hooks碰到的问题相关推荐

最新文章

热门文章