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。