Vue3/ Vue3概述认识Vue3 (Vue3基本信息 性能提升)、Vue3的新增特性( Vue3 setup)

在Vue3中，有一些重大改进，包括API的改进，编译性能的提升，以及对TypeScript的更好支持。

1. 新的组合API：Vue3引入了一个新的组合API，即setup函数，它是组织Vue3逻辑的主要方式。

<template>
  <div>{{ msg }}</div>
</template>
 
<script>
export default {
  setup() {
    return {
      msg: 'Hello Vue3!'
    }
  }
}
</script>

2. 响应式API的改进：Vue3中的响应式系统得到了改进，使用了Proxy代替Vue2中的Object.defineProperty。

import { reactive } from 'vue';
 
export default {
  setup() {
    const state = reactive({
      msg: 'Hello Vue3!'
    });
    return state;
  }
}

3. 生命周期钩子：Vue3中的生命周期钩子被重新命名并统一为Composition API的形式。

import { onMounted } from 'vue';
 
export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted!');
    });
  }
}

4. 其他新特性：如Fragment、Teleport、Suspense等组件，以及新的工具如Vite。

<template>
  <Suspense>
    <template #default>
      <AsyncComp />
    </template>
    <template #fallback>
      Loading...
    </template>
  </Suspense>
</template>
 
<script>
import { defineAsyncComponent } from 'vue';
 
const AsyncComp = defineAsyncComponent(() =>
  import('./AsyncComponent.vue')
);
 
export default {
  components: {
    AsyncComp
  }
}
</script>

以上代码展示了Vue3的一些新特性，包括setup函数的使用，响应式数据的定义，生命周期钩子的使用，以及异步组件的定义。