Vue 3 是 Vue.js 的最新版本，它引入了一些重要的新特性，包括：
Vue 3 的生命周期钩子
Vue 3 的生命周期钩子和 Vue 2 的大致相同，但有一些细微的变化。下面是 Vue 3 的生命周期钩子：
beforeCreate：在实例被创建之前调用，此时 data 和 methods 等属性还未初始化。created：在实例被创建之后调用，此时 data 和 methods 等属性已经初始化完成。beforeMount：在实例挂载之前调用，此时还未进行模板编译和挂载操作。mounted：在实例挂载之后调用，此时模板编译和挂载操作已经完成。beforeUpdate：在响应式数据发生变化之前调用，此时还未进行重新渲染操作。updated：在响应式数据发生变化之后调用，此时已经完成重新渲染操作。beforeUnmount：在实例卸载之前调用，此时组件实例仍然可用。unmounted：在实例卸载之后调用，此时组件实例已经被销毁。errorCaptured：在子组件抛出错误时调用，可以用来捕获和处理错误。
下面是一个使用 Vue 3 生命周期钩子的示例：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, World!'
};
},
beforeCreate() {
console.log('Component is about to be created.');
},
created() {
console.log('Component is created.');
},
beforeMount() {
console.log('Component is about to be mounted.');
},
mounted() {
console.log('Component is mounted.');
},
beforeUpdate() {
console.log('Component is about to be updated.');
},
updated() {
console.log('Component is updated.');
},
beforeUnmount() {
console.log('Component is about to be unmounted.');
},
unmounted() {
console.log('Component is unmounted.');
},
errorCaptured(error, vm, info) {
console.log(`An error occurred: ${error}`);
console.log(`Error info: ${info}`);
}
};
</script>
在这个示例中，我们定义了一个组件，并在不同的生命周期钩子中打印了不同的消息。
setup中执行生命周期函数
在 Vue 3 中，我们可以在 setup 函数中执行生命周期函数。这是因为 Vue 3 中引入了新的 Composition API，setup 函数是组件中使用 Composition API 的入口。
下面是一个在 setup 函数中执行生命周期函数的示例：
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onErrorCaptured } from 'vue';
export default {
setup() {
const count = ref(0);
onBeforeMount(() => {
console.log('Component is about to be mounted.');
});
onMounted(() => {
console.log('Component is mounted.');
});
onBeforeUpdate(() => {
console.log('Component is about to be updated.');
});
onUpdated(() => {
console.log('Component is updated.');
});
onBeforeUnmount(() => {
console.log('Component is about to be unmounted.');
});
onUnmounted(() => {
console.log('Component is unmounted.');
});
onErrorCaptured(error => {
console.error(error);
});
const increment = () => {
count.value++;
};
return {
count,
increment
};
}
};
</script>
在这个示例中，我们使用了 ref 创建了一个响应式数据 count，并在 setup 函数中定义了各个生命周期函数。需要注意的是，在 setup 函数中使用生命周期函数时，需要将其作为普通函数调用，而不是作为组件实例的方法调用。
同时，我们还将 increment 方法定义在了 setup 函数中，并通过返回值将其暴露给模板使用。这是因为在 Vue 3 中，模板中不能直接访问组件实例中的属性和方法，需要通过 setup 函数返回值将其暴露给模板使用。
Composition API
Composition API 是 Vue 3 中最重要的新特性之一，它提供了一种新的组织组件代码的方式，让代码更加可读、可维护。下面是一个使用 Composition API 的示例：
<template>
<div>
<p>{{ message }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { reactive, computed, onBeforeMount, onMounted } from 'vue';
export default {
setup() {
const state = reactive({
count: 0,
message: ''
});
const increment = () => {
state.count++;
};
const message = computed(() => {
return `Count is ${state.count}`;
});
onBeforeMount(() => {
// beforeMount代码执行
});
onMounted(() => {
// mounted代码执行
});
return {
state,
increment,
message
};
}
};
</script>
在这个示例中，我们使用 reactive 函数创建了一个响应式的数据对象 state，使用 computed 函数创建了一个计算属性 message，并使用 setup 函数返回了一个包含这些属性和方法的对象。
Teleport
Teleport 是 Vue 3 中的一个新特性，它允许我们在组件内部将内容渲染到任意位置。下面是一个使用 Teleport 的示例：
<template>
<div>
<button @click="showModal = true">Show Modal</button>
<teleport to="body">
<div v-if="showModal" class="modal">
<h3>Modal Title</h3>
<p>Modal Content</p>
<button @click="showModal = false">Close</button>
</div>
</teleport>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const showModal = ref(false);
return {
showModal
};
}
};
</script>
<style>
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
border: 1px solid black;
padding: 20px;
}
</style>
在这个示例中，我们使用 teleport 组件将一个模态框的内容渲染到 <body> 元素中，从而实现了模态框的效果。
当然，下面是 Vue 3 的其它常用新特性和示例：
Fragments
Fragments 是 Vue 3 中的一个新特性，它允许我们在模板中使用多个根元素。下面是一个使用 Fragments 的示例：
<template>
<>
<h1>Page Title</h1>
<p>Page Content</p>
</>
</template>
在这个示例中，我们使用了 <> 和 </> 包裹了多个根元素，这样就可以在模板中使用多个根元素了。
Suspense
Suspense 是 Vue 3 中的一个新特性，它允许我们在异步加载组件时显示一个占位符，直到组件加载完成后再显示真正的内容。下面是一个使用 Suspense 的示例：
<template>
<div>
<Suspense>
<template #default>
<AsyncComponent />
</template>
<template #fallback>
<p>Loading...</p>
</template>
</Suspense>
</div>
</template>
<script>
import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent({
loader: () => import('./AsyncComponent.vue')
});
export default {
components: {
AsyncComponent
}
};
</script>
在这个示例中，我们使用了 Suspense 组件包裹了一个异步加载的组件 AsyncComponent，并在 default slot 中显示了这个组件，在 fallback slot 中显示了一个占位符。
全局 API 修改
Vue 3 对全局 API 进行了修改，使其更加直观和易用。例如，Vue.directive 和 Vue.filter 现在变成了 app.directive 和 app.filter，其中 app 是应用实例。下面是一个使用全局 API 的示例：
<template>
<div v-highlight>Highlighted Text</div>
</template>
<script>
import { createApp } from 'vue';
const app = createApp({
directives: {
highlight(el) {
el.style.backgroundColor = 'yellow';
}
}
});
app.mount('#app');
</script>
在这个示例中，我们使用 createApp 函数创建了一个应用实例 app，并在其中定义了一个名为 highlight 的指令，然后使用 v-highlight 指令将其应用到一个元素上。
静态属性提取
Vue 3 改进了静态属性提取的机制，使得编译后的代码更小、更快。下面是一个使用静态属性提取的示例：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
name: 'MyComponent',
props: {
message: String
}
};
</script>
在这个示例中，我们在组件定义中定义了一个静态属性 name，这个属性会在编译时被提取出来，用于组件的注册和调试。
全局属性和方法
Vue 3 引入了一些新的全局属性和方法，使得开发更加便捷。例如，$attrs 和 $listeners 可以让我们更好地处理组件的传参和事件监听。下面是一个使用全局属性和方法的示例：
<template>
<div>
<input v-bind="$attrs" v-on="$listeners" />
</div>
</template>
<script>
export default {
inheritAttrs: false,
created() {
this.$attrs.placeholder = 'Enter text...';
this.$listeners.input = (event) => {
this.$emit('update:modelValue', event.target.value);
};
}
};
</script>
在这个示例中，我们使用了 inheritAttrs: false 禁用了组件的默认属性继承，然后在 created 钩子中修改了 $attrs 的属性和 $listeners 的事件监听。
新的生命周期钩子
Vue 3 引入了一些新的生命周期钩子，使得组件的生命周期更加精细。例如，beforeUnmount 钩子可以让我们在组件卸载之前做一些清理工作。下面是一个使用新的生命周期钩子的示例：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, World!'
};
},
beforeUnmount() {
console.log('Component is about to be unmounted.');
}
};
</script>
在这个示例中，我们使用了 beforeUnmount 钩子，在组件卸载之前打印了一条消息。
其它新特性
除了 Composition API 和 Teleport，Vue 3 还引入了一些其它的新特性，包括：
- 更快的渲染速度和更小的包体积
- 支持 TypeScript
- 改进的 TypeScript 类型推断
- 改进的自定义指令 API
- 改进的 v-model 指令
- 改进的事件处理器
- 改进的异步组件加载
以上是 Vue 3 的一些新特性和示例，希望能对您有所帮助。
