vue2与vue3区别

Vue2与Vue3的区别主要体现在以下几个方面：

1. TypeScript支持：Vue3相对于Vue2有更好的TypeScript支持。Vue2的Options API是一个简单的对象，而TypeScript是一种类型系统，面向对象的语法，两者不太匹配。因此，Vue2需要借助vue-class-component来增强原生组件，并且需要vue-property-decorator来增加更多与Vue特性结合的装饰器，写法相对繁琐。而Vue3由TypeScript重写，对TypeScript的支持更加友好。

2. Composition API：Vue3引入了Composition API，与Vue2的Options API相比，Composition API提供了更灵活、更可组合的方式来组织和重用代码。Composition API将组件的逻辑按照功能进行组织，而不是按照选项进行组织，使得代码更加清晰、易于维护。

3. 虚拟DOM优化：Vue3在虚拟DOM上增加了patchFlag字段，用于标记组件的更新类型，从而提高渲染性能。通过patchFlag的标记，Vue3可以更精确地知道哪些组件需要更新，避免不必要的DOM操作，提高了性能。

下面是一个示例，展示了Vue2和Vue3的区别：

<!-- Vue2 -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue2',
      message: 'Hello Vue2!'
    }
  }
}
</script>

<!-- Vue3 -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const data = reactive({
      title: 'Vue3',
      message: 'Hello Vue3!'
    })

    return {
      ...data
    }
  }
}
</script>