Vue3相比Vue2有许多重要的改变，包括API的变化、新特性、性能提升等。以下是一些主要的改变及其代码示例：
- 组合式API（Composition API）: Vue3引入了一个新的配置-
setup函数，它是组合API的入口。
Vue2:
export default {
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
}
}
}
Vue3:
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
function increment() {
count.value++;
}
return { count, increment };
}
}
- 响应式API的变化: Vue3使用了Proxy替代了Vue2中的Object.defineProperty，并且引入了新的响应式API。
Vue2:
this.$watch('count', (newValue, oldValue) => {
console.log(`count changed from ${oldValue} to ${newValue}`);
});
Vue3:
import { watch, ref } from 'vue';
const count = ref(0);
watch(count, (newValue, oldValue) => {
console.log(`count changed from ${oldValue} to ${newValue}`);
});
- 生命周期钩子的变化: Vue3中的生命周期钩子名称进行了改变或者合并，并引入了新的生命周期钩子。
Vue2:
beforeCreate() { ... },
created() { ... },
beforeMount() { ... },
mounted() { ... },
Vue3:
setup() { ... },
onBeforeMount() { ... },
onMounted() { ... },
- 移除了一些API: Vue3移除了一些Vue2中的API，比如
this.$refs。
Vue2:
<template>
<div ref="myDiv"></div>
</template>
<script>
this.$refs.myDiv;
</script>
Vue3:
<template>
<div ref="myDiv"></div>
</template>
<script>
myDiv.value;
</script>
- Fragment: Vue3中组件可以渲染多个节点，不再需要
<div>包裹。
Vue2:
<template>
<div>
<span>Part 1</span>
<span>Part 2</span>
</div>
</template>
Vue3:
<template>
<span>Part 1</span>
<span>Part 2</span>
</template>
- Teleport: Vue3中新增了Teleport组件，可以将子节点渲染到外部的DOM结构中。
Vue3:
<template>
<teleport to="body">
<div class="modal"></div>
</teleport>
</template>
- 其他改变: 如SSR的改变、更好的TypeScript支持、Fragments、Composition API等。
总结：Vue3在API设计、响应式系统、运行时性能、编译优化等方面有显著的改进，同时也移除了一些旧的、不推荐使用的API。开发者需要根据Vue3的更新指南对现有的Vue2项目进行迁移和重构，以便充分利用Vue3的新特性。