阅读 2580

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。

往期精彩文章