vue3与vue.js区别

Vue.js 3 是 Vue.js 的下一个主要版本，与 Vue.js 2 相比，它有以下几个区别：

1. 更小、更快：Vue.js 3 重写了其内部架构，使其更小、更快。它还引入了一些新的编译器优化，例如静态树提升和基于 Proxy 的观察者机制，这些都有助于提高性能。

2. 更好的 TypeScript 支持：Vue.js 3 提供了更好的 TypeScript 支持，包括更好的类型推断和更好的编辑器支持。

3. 更好的组件封装：Vue.js 3 引入了一个新的组合 API，使得组件封装更加容易和灵活。

4. 更好的可读性：Vue.js 3 的模板语法更加简洁和易读，使得代码更易于维护和理解。

5. 更好的开发体验：Vue.js 3 引入了一些新的开发工具，例如 Vue CLI 5 和 Vue Devtools 5，使得开发更加容易和高效。

6. 更好的性能：Vue.js 3 的性能比 Vue.js 2 更好，这得益于其更小、更快的内部架构和新的编译器优化。

// Vue.js 2
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello World',
      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
    }
  }
}
</script>

// Vue.js 3
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      title: 'Hello World',
      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
    })

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