一、一些小改变
1 destroyed
生命周期选项被重命名为 unmounted
2 beforeDestroy
生命周期选项被重命名为 beforeUnmount
3 data 选项应始终被声明为一个函数
在 2.x 中,开发者可以定义 data 选项是 object 或者是 function:
<!-- Object 声明 -->
<script>
const app = new Vue({
data: {
apiKey: 'a1b2c3'
}
})
</script>
<!-- Function 声明 -->
<script>
const app = new Vue({
data() {
return {
apiKey: 'a1b2c3'
}
}
})
</script>
在 3.x,data 选项已标准化为只接受返回 object 的 函数:
<script>
import { createApp } from 'vue'
createApp({
data() {
return {
apiKey: 'a1b2c3'
}
}
}).mount('#app')
</script>
4 watch监听数组时,只有当数组被替换时,回调才会触发,如果需要在改变时触发,则需要指定 deep 选项。
使用 监听数组时,在数组改变时 watch 回调将不再被触发。要想在数组改变时触发 watch 回调,就要指定 deep 选项:
二、新特性
1 片段
Vue 3 现在正式支持了多根节点的组件,也就是片段。
在 2.x 中,由于不支持多根节点组件,组件被包裹在一个 <div>
中:
<template>
<div>
<header>...</header>
<main>...</main>
<footer>...</footer>
</div>
</template>
在 3.x 中,组件可以包含多个根节点。
<!-- Layout.vue -->
<template>
<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>
</template>
2 组合式 API
将同一逻辑代码收集在一起,使代码将更具可读性,更易维护。
以一个搜索组价为例:
当被要求再增加几个功能时,我们的逻辑可能会变成如下这样:
![](https://i-blog.csdnimg.cn/blog_migrate/6fe69cb4c5a06489552dcb9c5eb0ecac.jpeg#pic_center)
同一逻辑代码将在不同选项(components, props, data, computed, methods)中进行拆封,从而导致我们逻辑关注点分散,降低了理解性和可读性。
这种碎片化使得理解和维护复杂组件变得困难。此外,在处理单个逻辑关注点时,我们必须不断地“跳转”(上下滑动)相关代码块。
如果我们能够将同一逻辑代码收集在一起,那么我们的代码将更具可读性,更易于维护:
![](https://i-blog.csdnimg.cn/blog_migrate/a8653eed08e71147e48fbfa9cc2c8b8d.jpeg#pic_center)
在 Vue 组件中,我们在 setup 中使用组合式 API。
那么这个例子如果采用组合式API把代码组合在一起,它会是这样:
![](https://i-blog.csdnimg.cn/blog_migrate/560f91bd940d71dca1c059afca21d5ed.jpeg#pic_center)
我们需要把某功能相关逻辑封装到函数中,再在setup中引用: