Vue3/ Vue2 和 Vue3文件的区别 、Vue3 ( steup函数 )语法方法介绍

Vue3相比Vue2有以下主要改变：

1. 组合式API（Composition API）：Vue3引入了一个新的配置API，名为setup函数，它是Vue3中使用Composition API的入口。
2. 响应式系统改进：Vue3使用Proxy替代Vue2中的Object.defineProperty，提供了更好的数组响应式和更佳的TypeScript支持。
3. 框架层面的改进：Vue3删除了一些旧的API，并引入了一些新的Composition API函数，如ref、reactive、computed和watch等。
4. 生命周期钩子的变化：Vue3中的生命周期钩子与Vue2中的有所不同，包括onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted等。
5. 新的Teleport组件：Teleport可以将组件渲染在DOM中的其他位置。
6. 新的Suspense组件：Suspense用于处理异步导入的组件。

下面是Vue3中setup函数的一个简单示例：

<template>
  <div>{{ msg }}</div>
</template>
 
<script>
import { defineComponent, ref } from 'vue';
 
export default defineComponent({
  setup() {
    const msg = ref('Hello Vue 3!');
    return { msg };
  }
});
</script>

在这个例子中，我们创建了一个响应式引用msg，并在setup函数中返回它，使其可以在模板中使用。这是Vue3中Composition API的基本用法。