vue3常用方法及案例

Vue3是Vue.js的最新版本，它具有更加简洁、高效的API和更好的性能。下面是Vue3常用方法及案例：

1. 响应式数据

在Vue3中，使用`ref`和`reactive`来创建响应式数据。

import { ref, reactive } from 'vue'

// ref
const count = ref(0)

// reactive
const state = reactive({
  name: 'Vue',
  version: '3.0',
  features: ['Composition API', 'Teleport', 'Suspense'],
})

2. 组件

Vue3中，组件的定义方式有所变化，使用`defineComponent`来定义组件。

import { defineComponent } from 'vue'

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  setup(props) {
    return {
      greeting: `Hello, ${props.msg}!`,
    }
  },
  template: '<h1>{{ greeting }}</h1>',
})

3. 生命周期

Vue3中，生命周期的名称和使用方式都有所变化。

import { onBeforeMount, onMounted } from 'vue'

export default {
  // Vue2
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  },

  // Vue3
  setup() {
    onBeforeMount(() => {
      console.log('beforeMount')
    })
    onMounted(() => {
      console.log('mounted')
    })
  },
}

4. 组合式API

Vue3中，引入了组合式API，可以更好地组织和重用逻辑。

import { ref, computed, watchEffect } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubled = computed(() => count.value * 2)

    watchEffect(() => {
      console.log(`count: ${count.value}, doubled: ${doubled.value}`)
    })

    return {
      count,
      doubled,
    }
  },
}

5. Teleport

Vue3中，新增了Teleport组件，可以将子组件的内容渲染到父组件之外的DOM节点中。

<template>
  <div>
    <h1>Welcome to my app!</h1>
    <teleport to="body">
      <Modal :show="showModal" @close="showModal = false" />
    </teleport>
    <button @click="showModal = true">Show Modal</button>
  </div>
</template>

6. Suspense

Vue3中，新增了Suspense组件，可以优雅地处理异步组件和动态组件的加载状态。

<template>
  <div>
    <Suspense>
      <template #default>
        <AsyncComponent />
      </template>
      <template #fallback>
        <Loading />
      </template>
    </Suspense>
  </div>
</template>

以上是Vue3常用方法及案例，希望对您有所帮助。