vue新特性

Vue.js 是一个渐进式的JavaScript框架，它的目标是通过尽可能简单的API提供最大的功能，并不是一个全能的框架。Vue.js 2.0引入了很多新特性，例如单文件组件（.vue文件）、指令（如v-bind、v-model、v-if、v-for等）、响应式系统、组件系统等。Vue.js 3.0在2020年9月发布，它引入了Composition API、Teleport、Fragment等新特性，并对底层的依赖项进行了更新，以提高TypeScript的支持，并提高运行时的效率。

以下是一些Vue.js 3.0的新特性的简单示例：

1. Composition API: 使用多个简单的函数来表达一个组件的逻辑，而不是使用this关键字。

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

2. Teleport: 可以将组件的HTML内容传送到DOM结构中的其他位置。

<template>
  <teleport to="#modals">
    <div>Modal content</div>
  </teleport>
</template>
 
<!-- 页面其他部分 -->
<div id="modals"></div>

3. Fragment: 可以让组件不需要根节点。

<template>
  <span>Text 1</span>
  <span>Text 2</span>
</template>

4. Emits Composition: 使用一个新的API来定义组件可以发出的事件。

import { defineComponent, ref, toRefs } from 'vue';
 
export default defineComponent({
  props: {
    title: String
  },
  setup(props) {
    const { title } = toRefs(props);
    const emitTitle = () => {
      // 使用emit函数发送事件
    };
    return { title, emitTitle };
  }
});

这些只是Vue.js 3.0中的一些新特性，Vue.js 3.0还有很多其他的新特性和改进。