preface

So far, uni-App development with Vue3 has reached the stage of basic usability, although there are still a lot of holes. This article focuses on the pitfalls and precautions to avoid when developing UNI-App using Vue3 composition-API. Assuming you have the basic development “scaffolding” in place, you can refer to my other article # uni-app + Vue3 + TS Base Project Construction practice if you need it.

Life cycle function

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { onShow, onHide } from '@dcloudio/uni-app'

type options = { id: string }
let options: options

export default defineComponent({
  onInit() {},
  onLoad(opt: options) {}, // Get page path parameters
  setup() {
    const query = ref({} as options)
    // page display
    onShow(() = > 
      query.value = options
    })
    
    // When the page is hidden
    onHide(() = > {})
  },
})
</script>
Copy the code

Custom style custom-class

  • < Component class=”class-name”>
<! -- Parent component --><template>
  <view :class="[customClass]"></view>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  props: {
    customClass: { type: String.default: ' ' }, // Custom class}})</script><! -- Subcomponent --><template>
  <component custom-class="custom-class"></component>
</template>

<style scoped>
/* To use scoped, /deep/ */ is required
/deep/ .custom-class {}
</style>
Copy the code

Emit events

<template>
  <view @click="handleClick"></view>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  emits: ['click'].// Emit is constrained after the explicit description of the event
  setup(props, {emit}) {
    function handleClick(e) {
      emit('click', e)
    }
    
    return {
      handleClick,
    }
  },
})
</script>
Copy the code

props \ ref \ reactive \ computed

<script lang="ts">
import { defineComponent, PropType, ref, reactive, computed } from 'vue'

type Data = { id: string }

export default defineComponent({
  props: {
    data: { type: Object as PropType<Data>, default: false}},setup(props) {
    // ref is more suitable for an object assignment
    const data = ref(props.data)
    
    Reactive is better suited for encapsulation of small-scale logic
    const popup = reactive({
      isShow: false.show: () = > (popup.isShow = true)
      hide: () = > (popup.isShow = false)})const id1 = computed(() = > props.data ? props.data.id : ' ') 
    // Because the uni and Vue life cycles are not consistent, props. Data may not be defined during initialization to ensure that no errors are reported
    const id2 = computed(() = >props.data? .id)return {
      isShow,
      popup,
      id1, id2,
    }
  },
})
</script>
Copy the code

At the end

  • Overall, the use of vue3 composition-API to develop uni-App code improves the readability and maintainability of the code and is worth the effort

  • If my article is helpful to you, I hope you can give me a small praise 👍🏻~