一、更小、更快的代码
在 Vue 3 中，为了获得更好的性能和更小的包大小，进行了许多优化。一个重要的变化是模板编译器的重构。Vue 3 中重新实现的模板编译器比 Vue 2 中的编译器小得多，因为它使用了更先进的优化技术，如基于树状结构（tree-shaking）和静态分析，以消除无用的代码。
<template>
<div>
<p>Hello {{ name }}!</p>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const name = ref('Vue 3')
return {
name
}
}
}
</script>
上述代码示例中，我们可以看到如何使用ref创建一个简单的响应式变量，并在模板中使用这个变量来更新视图。由于编译器的优化，这段代码可以最终编译为非常小的 JavaScript 代码。
二、更好的 TypeScript 支持
Vue 3 内置了对 TypeScript 的支持。与 Vue 2 不同，Vue 3 中的 API 设计具有更好的类型推理，这使得编写类型安全的代码变得更加容易。例如，Vue 3 中的组件选项对象具有完全类型化定义，并且支持用 TypeScript 编写原始模板和插槽代码。
<template>
<slot name="header" :title="title">
<p>Fallback content</p>
</slot>
</template>
<script lang="ts">
import { defineComponent, Slot } from 'vue'
interface Props {
title: string
content: string
}
export default defineComponent({
props: {
title: {
type: String,
required: true
},
content: {
type: String,
default: ''
}
},
setup(props, { slots }: { slots: { header?: Slot } }) {
return {
slots
}
}
})
</script>
上述代码示例中，我们可以看到如何使用 TypeScript 来定义组件选项对象、props 和 slots。实现了类型化，以确保在组件中调用模板和插槽时，props 和 slots 中的变量都有自己的类型定义。
三、更好的响应式 API
Vue 3 中的响应式 API 也进行了更新，使其更加灵活和可靠。与 Vue 2 不同，Vue 3 使用了 Proxy API 来实现对响应式数据的监听，而不是使用 Object.defineProperty。这种方式更加可靠，能够捕获更多的操作，如添加/删除属性和数组元素。此外，Vue 3 也添加了一些新的响应式 API，如shallowReactive和shallowRef，这两个 API 可以更高效地处理大型数据。
<template>
<div>
<p>My name is {{ user.name }}.</p>
<p>I am {{ age }} years old.</p>
</div>
</template>
<script>
import { reactive, ref, watch } from 'vue'
export default {
setup() {
const user = reactive({
name: 'John Doe',
age: 23
})
const age = ref(user.age)
watch(age, (newAge) => {
user.age = newAge
})
return {
user,
age
}
}
}
</script>
上述代码示例中，我们可以看到如何使用reactive和ref创建响应式数据。我们还使用watch函数来监视age变量的变化，并在变化发生时更新user对象中的age属性。
四、更好的性能优化
Vue 3 中的性能也进行了改善。一个重要的变化是新的组件实例化机制。Vue 3 使用了 Proxy API 来代替旧的 defineProperty，这样可以更加高效地跟踪属性的变化。Vue 3 还为编译器添加了一些新特性，如静态提升和源代码映射。这些新特性使得生成的代码更加高效，可以更好地被浏览器和其他 JavaScript 引擎处理。
<template>
<button @click="increment">{{ count }}</button>
</template>
<script>
import { reactive } from 'vue'
export default {
setup() {
const state = reactive({
count: 0
})
function increment() {
state.count++
}
return {
...state,
increment
}
}
}
</script>
上述代码示例中，我们可以看到一个使用响应式数据的简单计数器组件。由于 Vue 3 的性能更加高效，这个组件可以非常快速地监视状态的变化，并在按钮点击时更新视图。