Небольшая яма Vue3 под IOS

Vue.js

предисловие

посколькуVue3 Betaс момента выхода(Нажмите, чтобы узнать, как создать бета-проект Vue3), я начал пробовать использовать его в небольших проектах, и я должен сказать, что это действительно ароматно. Хотя это может быть не очень дружелюбно для новичков, это не слишком круто для тех, кто использовал React Hooks, который решает проблема многократного запуска React Hooks.И оптимизация производительности и много других умственных нагрузок, а просто только что сделанный динамический эффект отлично работает на моем мобильнике, и я с радостью отношу его коллеге на тестирование, а вот Apple mobile у коллеги телефон не имеет никакого динамического эффекта:

А на моем телефоне это выглядит так:

Логика этого спецэффекта такова: сначала получить разрешение задней камеры на съемку, а потом зациклить анимацию кадра поверх видео (По сути, это как AR), поскольку компания не может разрабатывать модели дополненной реальности, она может только позволить художникам отображать изображения, а затем создавать поддельные дополненные реальности на веб-сайте, тогда проблема в том, что если модель, созданная WebGL, представляет собой большой объем кода, она еще сотни К максимум 1М, но анимация кадра другая.Художник дал мне сотни картинок, каждая из которых около 50к, в сумме больше десяти М до двадцати М, время загрузки слишком долгое, поэтому я нужна анимация ожидания. Эта анимация ожидания является предупреждением. Предупреждение – это изображение, снятое в данный момент камерой. Это предупреждение будет увеличиваться с увеличением количества загружаемых изображений. Когда загрузка будет завершена, предупреждение будет занимать весь экран (То есть будьте осторожны.). Если вы все еще не понимаете, что это за эффект, вы можете отсканировать код в WeChat, чтобы увидеть:

Примечание: Лучше всего открывать браузером, он еще не разработан и могут быть баги!

Передача значений между компонентами

Изображение запрошено в компоненте кадровой анимации, но сколько частей этого значения запрошено изображением, нужно передать компоненту, который осторожен, я обнаружил, что метод передачи значения vue2 $emit не прост в использовании !

// 子组件
import { defineComponent } from 'vue'

export default defineComponent((props, ctx) => {
    ctx.$emit('event', '来自子组件的值')
    return {}
})

<!--父组件-->
<Child @event="getChildValue"/>

Этот ctx эквивалентен vue2.x

Однако этот метод передачи по значению, очень распространенный в vue2.x, здесь не работает.

Метод значения передачи Vue3

Итак, как передать значение? Попробуйте еще раз с пользовательским хуком, таким как React Hooks:

//抽取出来一个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.

Яма вахты + на монтируется под IOS

Первоначально необходимо было отслеживать значение, возвращаемое компонентом, который запрашивал изображение, чтобы передать компоненту Xiaoxin.Каждый раз, когда запрашивалось изображение, Xiaoxin немного увеличивал масштаб, пока Xiaoxin не заполнил экран. Итак, я написал это:

import { onMounted } from 'vue'
import { useXxx } from '../use/useXxx'
// 只贴出了关键代码
setup () {
    const { val } = useXxx()
    onMounted(_ => {
        // 此处省略若干行业务代码
        watch(val, v => console.log(v))
    })
}

Этот код хорошо работает на моем ПК и мобильном телефоне и выводит значение без ошибок, поэтому я с уверенностью пошел показывать его другим, и как только я встретил телефон Apple...

решение

Упоминается, что функция наблюдения используется вне функции жизненного цикла.

import { onMounted } from 'vue'
import { useXxx } from '../use/useXxx'
// 只贴出了关键代码
setup () {
    const { val } = useXxx()
    watch(val, v => console.log(v))
    onMounted(_ => {
        // 此处省略若干行业务代码
    })
}

Не рекомендуется смешивать функции наблюдения с различными функциями жизненного цикла, иначе могут возникнуть непредвиденные ошибки.

Замечательные статьи в прошлом

Категории