Composition API:
组合式 API 提供了更灵活和可组合的方式来组织代码。它允许将逻辑功能集中在一起,而不是分散在生命周期钩子中。
import { ref, reactive, computed, watch } from 'vue';
export default {
setup() {
const count = ref(0);
const state = reactive({ message: 'Hello' });
function increment() {
count.value++;
}
const doubleCount = computed(() => count.value * 2);
watch(count, (newVal, oldVal) => {
console.log(`count changed from ${oldVal} to ${newVal}`);
});
return { count, state, increment, doubleCount };
}
};
Teleport:
Teleport 允许将组件的模板部分渲染到 DOM 树的其他位置,而不依赖于组件层次结构。
<template>
<teleport to="body">
<div class="modal">This is a modal</div>
</teleport>
</template>
Fragments:
Vue 3 支持组件返回多个根节点,这意味着你不再需要包裹多个元素在单一的根元素内。
<template>
<div>First element</div>
<div>Second element</div>
</template>
Emits Option:
emits 选项明确列出了组件可以触发的事件,有助于事件的类型检查。
export default {
emits: ['update'],
setup(props, { emit }) {
function updateValue() {
emit('update', newValue);
}
return { updateValue };
}
};
Better TypeScript Support:
Vue 3 从一开始就设计为更好地支持 TypeScript,提供了更好的类型推断和类型检查。
Improved Performance:
Vue 3 使用了 Proxy 代替 Vue 2 中的 Object.defineProperty,提供了更好的性能和更少的限制。
Composition API with Reactivity:
提供了更细粒度的 reactivity 和更灵活的 state management。
import { reactive, toRefs } from 'vue';
export default {
setup() {
const state = reactive({
count: 0,
message: 'Hello'
});
return {
...toRefs(state)
};
}
};
New Lifecycle Hooks:
新的生命周期钩子,如 onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount 和 onUnmounted,提供了更细粒度的控制。
新特性使得 Vue 3 比 Vue 2 更加灵活、高效且易于维护。