preface

Since the release of the Vue3 Hooks (click here to see how to create the Vue3 Beta project), I’ve been trying to use it on small projects, and I have to say it’s really nice, it’s probably not very friendly to newbies, but it’s not great for people who used React Hooks. – Fixed the mental load of React Hooks and performance optimisations, but just after one of the actions worked perfectly on my own phone, I gave it to my colleagues, who had no dynamic effects on their iphones:

On my phone, it looks like this:

The logic of this special effect goes like this: Access to the rear camera permission to shoot first, and then in the video above looping animation (actually is the imitation of AR), due to the company to develop AR model, will only make art map and web side do a pseudo AR, so the question comes, if it is a model of WebGL amount even if the code is very big, is still just a few hundred K at most 1 m, But frame animation is different. The artist gave me hundreds of pictures, each of which is about 50K. The loading time is too long, so I need a waiting animation. It will get bigger and bigger with the number of images you load, and when it’s loaded it will take up the full screen. If you still don’t understand what the effect is, you can scan the code on wechat to experience:

Note: it is best to use the browser to open, has not been developed, may have a bug!

Pass values between components

Request in the animation to the component pictures, images, however, has pleaded for this value is how many pieces need to pass to heart the components to carefully and found $emit this vue2 biography method should not make!

/ / child component
import { defineComponent } from 'vue'

export default defineComponent((props, ctx) = > {
    ctx.$emit('event'.'Values from child components')
    return{}})Copy the code
<! -- parent component -->
<Child @event="getChildValue"/>
Copy the code

That CTX is the same as this in vue2.x

However, the pass-through method so common in vue2.x has no effect here.

Vue3 Value transmission mode

So how do you pass values? Try again with the React Hooks:

// Extract a js file
import { ref } from 'vue'

const count = ref(0)

export default number => {
  count.value = number || count.value
  return { count }
}
Copy the code
<! -- subcomponent 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>
Copy the code
<! -- subcomponent 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>
Copy the code
<! -- parent component -->
<template>
  <A/>
  <B/>
</template>

<script>
import A from './A'
import B from './B'

export default {
  components: { A, B }
}
</script>
Copy the code

You can see that this is very similar to the custom Hook use of React Hooks.

Watch + onMounted under IOS pit

It is supposed to listen for the value returned by the component that requested the image to give to the component. Each additional image returned by the component that requested the image, the component zoomed in until it filled the screen. So I wrote this:

import { onMounted } from 'vue'
import { useXxx } from '.. /use/useXxx'
// Only the key code is posted
setup () {
    const { val } = useXxx()
    onMounted(_= > {
        // Omit several lines of business code
        watch(val, v= > console.log(v))
    })
}
Copy the code

This code works well on my PC and mobile terminal and prints out values without any errors, so I’m confident to show it to others, and as soon as I meet an iPhone…

The solution

Use the watch function outside of the lifecycle function.

import { onMounted } from 'vue'
import { useXxx } from '.. /use/useXxx'
// Only the key code is posted
setup () {
    const { val } = useXxx()
    watch(val, v= > console.log(v))
    onMounted(_= > {
        // Omit several lines of business code})}Copy the code

It is recommended not to mix watch functions with various lifecycle functions, otherwise unexpected bugs may occur.

Previous excellent article

  • Microsoft launches comments section on GitHub
  • Vue 3.0.3: New CSS variable passing and the latest Ref Proposal
  • “Don’t underestimate the nine grid, one question can let a candidate reveal his true colors!”
  • “Mobile Layout Interview Questions to test your CSS Skills (Center)”
  • A series of confusing behaviors after setting prototype Objects as Proxies
  • Vue’s Super Fun New Feature: DOM Portal
  • A fun new feature of Vue: Introducing JS variables into CSS
  • Create your own Visual Data Map without any libraries
  • “Use of React’s Super-popular CSS-in-JS Library in the Vue Project: Styled – Components”
  • Is It Finally Vue’s Turn to Inspire React?
  • Upgrade your React project to Immer instead of Immutable by 2020
  • “Soul Interrogation from the Author of React Hooks and Immutable”
  • Good news, Vue3 official document is available in Chinese!
  • Hooks use of the New VUe-Router
  • Vue 3:20 Years of Status Updates
  • React 17 is officially a transition version!
  • Yu Yuxi: The Design Process of Vue3
  • The Father of Node’s refactoring Deno is finally released. Will it Replace Node after all?
  • The Vue3 beta was released early this morning and openly supports scaffolding!