Vue3在IOS下的一个小坑
2020/5/1 11:02:42
本文主要是介绍Vue3在IOS下的一个小坑,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
自从Vue3 Beta发布以来(点击查看如何创建Vue3 beta项目),我就开始尝试在小项目中使用它了,不得不说真是香,虽然对新手可能不太友好,但是对于用过React Hooks的人来说简直不要太爽,解决了React Hooks多次运行以及性能优化等多项心智负担,但是就在刚刚做好的一个动效在自己手机上完美运行,美滋滋的拿去给同事测试,然而同事的苹果手机却没有任何动态效果:
而在我的手机效果是这样的: 这个特效的逻辑是这样的:首先获取后置摄像头权限进行拍摄,然后在视频上方循环播放帧动画(其实就是仿AR),由于公司无力开发AR模型,只能让美工渲图然后web端做个伪AR,那么问题来了,如果是WebGL做出来的模型即使代码量很大,也依然就几百K顶多1M,但是帧动画就不一样了,美工给了我几百张图,每一张大概在50k左右,加在一起十多M二十来M的,加载时间太长了,所以需要一个等待动画,这个等待动画就是一个小心心,小心心里面是你摄像头目前拍摄到的画面,这个小心心会随着你加载的图片的数量而越来越大,当加载完毕后小心心占满全屏(也就是看不到小心心啦)。如果还是不明白到底是个什么样的效果,可以微信扫码进行体验:注意:最好用浏览器打开,还没开发完,可能会有bug!
组件间传值
在帧动画那个组件里请求的图片,但是图片请求了多少张这个数值需要传递到小心心那个组件去,发现$emit这种vue2传值法居然不好使了!
// 子组件 import { defineComponent } from 'vue' export default defineComponent((props, ctx) => { ctx.$emit('event', '来自子组件的值') return {} }) 复制代码
<!--父组件--> <Child @event="getChildValue"/> 复制代码
那个ctx就相当于vue2.x的this
然而这种在vue2.x中十分常见的传值方法在这里却没有任何效果。
Vue3传值方式
那么该如何传值呢?用React Hooks的那种自定义Hook再试试:
//抽取出来一个js文件 import { ref } from 'vue' const count = ref(0) export default number => { count.value = number || count.value return { count } } 复制代码
<!--子组件A--> <template> <span>{{count}}</span> </template> <script> import { defineComponent } from 'vue' import useCount from '../use/useCount' export default defineComponent(_ => { const { count } = useCount() return { count } }) </script> 复制代码
<!--子组件B--> <template> <button @click="addCount">+</button> <a href="#">{{count}}</a> </template> <script> import { defineComponent } from 'vue' import useCount from '../use/useCount' export default defineComponent(_ => { const { count } = useCount() const addCount = _ => count.value++ return { count, addCount } }) </script> 复制代码
<!--父组件--> <template> <A/> <B/> </template> <script> import A from './A' import B from './B' export default { components: { A, B } } </script> 复制代码可以看到和React Hooks的自定义Hook用法很相似。
watch + onMounted在IOS下的坑
本来是需要监听请求图片那个组件传回来的值来给小心心组件,每多请求回来一张图,小心心就放大一些,直到小心心充满屏幕。 于是乎我这样写了:
import { onMounted } from 'vue' import { useXxx } from '../use/useXxx' // 只贴出了关键代码 setup () { const { val } = useXxx() onMounted(_ => { // 此处省略若干行业务代码 watch(val, v => console.log(v)) }) } 复制代码
这段代码在我的PC端和移动端都运行良好打印出值来,并且没有任何的报错,所以我才自信满满的去给别人看,结果一碰见苹果手机就……
解决方案
把watch函数提到生命周期函数外部使用。
import { onMounted } from 'vue' import { useXxx } from '../use/useXxx' // 只贴出了关键代码 setup () { const { val } = useXxx() watch(val, v => console.log(v)) onMounted(_ => { // 此处省略若干行业务代码 }) } 复制代码
建议不要将watch函数与各种生命周期函数放在一起混用,否则可能会出现意想不到的bug。
这篇关于Vue3在IOS下的一个小坑的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南