部分vue3.0 特性

一、一些小改变

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

将同一逻辑代码收集在一起，使代码将更具可读性，更易维护。

以一个搜索组价为例：

当被要求再增加几个功能时，我们的逻辑可能会变成如下这样：

同一逻辑代码将在不同选项（components, props, data, computed, methods）中进行拆封，从而导致我们逻辑关注点分散，降低了理解性和可读性。

这种碎片化使得理解和维护复杂组件变得困难。此外，在处理单个逻辑关注点时，我们必须不断地“跳转”（上下滑动）相关代码块。

如果我们能够将同一逻辑代码收集在一起，那么我们的代码将更具可读性，更易于维护：

在 Vue 组件中，我们在 setup 中使用组合式 API。
那么这个例子如果采用组合式API把代码组合在一起，它会是这样：

我们需要把某功能相关逻辑封装到函数中，再在setup中引用：