vue3新特性

Vue 3相比Vue 2新增了以下内容：

静态提升（Static Tree Hoisting）：在编译阶段，Vue 3 可以将动态节点转换为静态节点，从而提高组件的渲染性能。

编译优化（Compiler Optimizations）：Vue 3 的编译器可以更好地分析模板，减少渲染时的不必要计算和更新。

Composition API：Composition API 是 Vue 3 中新增的一种组合式 API，它使得组件逻辑代码更加清晰、可读性更高，同时也更容易复用。

Teleport：Teleport 是 Vue 3 中新增的一个组件，用于实现跨组件层级的 DOM 元素移动功能。

Fragments：Fragments 是 Vue 3 中新增的一个特性，用于解决多个组件必须包含在一个父元素中的问题。

新的生命周期函数：beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted等生命周期函数被重新设计，让开发者更加轻松地控制应用各个生命周期内的处理过程。

下面是 Vue 3 Composition API 的一个示例：

<template>
  <div>{{ count }}</div>
</template>

<script>
import { reactive, computed } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
    })

    const double = computed(() => {
      return state.count * 2
    })

    const increase = () => {
      state.count++
    }

    return {
      count: state.count,
      double,
      increase,
    }
  },
}
</script>

在上面的示例中，我们使用 reactive 函数来创建响应式对象 state，使用 computed 函数创建计算属性 double。同时，在 setup 函数中定义了 increase 函数来更新 count 属性。在模板中，我们可以直接使用这些响应式对象和计算属性。

下面是一个使用 Vue 3 Teleport 的实例：

<template>
  <div>
    <button @click="toggleModal">Toggle Modal</button>
    <teleport to="#myModal">
      <Modal v-if="isModalVisible" />
    </teleport>
  </div>
</template>

<script>
import { ref } from 'vue'
import Modal from './Modal.vue'

export default {
  components: {
    Modal,
  },

  setup() {
    const isModalVisible = ref(false)

    const toggleModal = () => {
      isModalVisible.value = !isModalVisible.value
    }

    return {
      isModalVisible,
      toggleModal,
    }
  },
}
</script>

在上面的示例中，我们使用 Teleport 组件将 Modal 组件渲染到页面中的指定位置（#myModal）。在 setup 函数中定义了响应式变量 isModalVisible 和方法 toggleModal，用于控制 Modal 组件的显示或隐藏。