Vue3在IOS下的一个小坑__Vue.js

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

自从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。