自从Vue3Beta发布后，我就尝试在小项目中使用它。不得不说真的很好吃。虽然对新手来说可能不友好，但是对于用过ReactHooks的人来说也不算爽，解决了多次运行ReactHooks，性能优化等很多精神负担，只是刚才自己做的一个动态效果在我的手机上完美运行，很高兴拿给同事测试，但是同事的苹果手机没有任何动态效果：但是在我的手机上效果如下：这个逻辑特效如下：先获得后置摄像头拍摄权限，然后在视频上方循环播放帧动画（其实是模仿AR），因为公司无法开发AR模型，只能让美工渲染图片然后在网页上做一个伪AR，那么问题来了，如果WebGL做的模型代码量大，最多1M还是只有几百K，但是帧动画就不一样了。美工给了我几百张图，每张50k左右，加起来10M多到20M。加载时间太长，所以我需要一个等待动画。这部等待动画是一颗小小的心。小心脏里面是您的相机当前拍摄的照片。这颗小小的心会随着你加载的图片数量越来越大。加载完成后，小心脏会占满屏幕（就是watch不小心）。组件间传值帧动画组件中请求的图片，但是有多少张图片请求这个值需要传递给细心的组件。我发现像$emit这样的vue2传值方式不好用！//subcomponentimport{defineComponent}from'vue'exportdefaultdefineComponent((props,ctx)=>{ctx.$emit('event','valuefromsubcomponent')return{}})那个ctx就相当于vue2.x的这个，但是这个在vue2.x中很常见的传值方式在这里并没有作用。Vue3中如何传值那么如何传值呢？在ReactHooks中尝试自定义Hook并重试//提取一个js文件import{ref}from'vue'constcount=ref(0)exportdefaultnumber=>{count.value=number||count.valuereturn{count}}{{count}}+{{count}}可以看到和ReactHooks的自定义Hook用法非常相似。watch+onMounted是IOS下的一个坑，需要监听requestpictures那个组件返回的值发送给小新组件。每次请求附加图像时，小新都会放大直到填满屏幕。所以我这样写：import{onMounted}from'vue'import{useXxx}from'../use/useXxx'//只贴出关键代码setup(){const{val}=useXxx()onMounted(_=>{//这里省略几行业务代码watch(val,v=>console.log(v))})}这段代码在我的PC和手机上都运行良好并打印了值，并且没有报错，所以我就放心地去给别人看。一遇到苹果手机，我...解决办法就是把手表功能提到生命周期功能之外。import{onMounted}from'vue'import{useXxx}from'../use/useXxx'//只贴出关键代码setup(){const{val}=useXxx()watch(val,v=>console.log(v))onMounted(_=>{//这里省略几行业务代码})}建议不要将watch函数和各种生命周期函数混用，否则可能会出现意想不到的bug。
