Vue 3 迁移策略笔记—— 第8节：Data 选项

前言

本笔记主要基于官方文档《迁移策略—— Data 选项》汇总而来。如有理解出入，请以官方文档为主。建议您以官方文档为主，本文为辅。这样您可以“以自己为主”审视的阅读，从而不被我的观点带偏。

概述

• data选项的不再接受 JS 对象，只接受函数形式的声明。
• 当合并来自 mixin 或 extend 的多个 data 返回值时，data现在变为浅拷贝形式(只合并根级属性)。

Vue 2.x data Option 的声明

在 Vue 2.x ，声明data有两种方式：

• 对象形式（常用于 Vue 根实例）

  const app = new Vue({
    data: {
      apiKey: 'a1b2c3'
    }
  })
  

• 函数形式 （常用于 Vue 组件）

  const app = new Vue({
    data() {
      return {
        apiKey: 'a1b2c3'
      }
    }
  })
  

Vue 3.x 只支持函数形式声明

Vue 3.x 对 data的声明进行了标准化。现只接受函数形式的声明形式。

上面代码变成：

<script>
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        apiKey: 'a1b2c3'
      }
    }
  }).mount('#app')
</script>

Mixin 的改变

当组件的data与mixin或extends的data进行合并时，Vue 3.x 只进行浅拷贝形式。

如下例子：

const Mixin = {
  data() {
    return {
      user: {
        name: 'Jack',
        id: 1
      },
      pwd: '123456'
    }
  }
}

const CompA = {
  mixins: [Mixin],
  data() {
    return {
      user: {
        id: 2
      },
      pwd: '121212'
    }
  }
}

Vue 2.x data执行的结果：

{
  user: {
    id: 2,
    name: 'Jack'
  },
  pwd: '121212'
}

Vue 2.x 中，data的合并是深拷贝形式。以ComA的data为主，Mixin的data里的属性将逐一跟ComA的data里的属性比较。如果属性ComA data里存在的，且是对象，则进入对象内部进行比较；若不是对象，则跳过；如果属性在ComA data里不存在，则直接添加到ComA data。

Vue 3.x data执行结果：

{
  user: {
    id: 2
  }，
  pwd: '121212'
}

Vue 3.x 是浅拷贝，所以不会进入对象的内部进行比较。因此，但 Vue 发现user属性在ComA的data已经存在时，就直接跳过了。

---

本系列目录

• Vue 3 迁移策略笔记—— 第1节：v-for 中的 Ref 数组

• Vue 3 迁移策略笔记—— 第2节：Async Components 异步组件

• Vue 3 迁移策略笔记—— 第3节：Attribute Coercion Behavior （属性强制行为）

• Vue 3 迁移策略笔记——第4节：$attrs 包括class&style

• Vue 3 迁移策略笔记—— 第5节：移除 $children

• Vue 3 迁移策略笔记—— 第6节：自定义指令

• Vue 3 迁移策略笔记—— 第7节：自定义元素交互

• Vue 3 迁移策略笔记—— 第8节：Data 选项

• Vue 3 迁移策略笔记—— 第9节：新增 emits 选项

• Vue 3 迁移策略笔记—— 第10节：事件 API

• Vue 3 迁移策略笔记—— 第11节：移除过滤器

• Vue 3 迁移策略笔记—— 第12节：片段

• Vue 3 迁移策略笔记—— 第13节：函数式组件

• Vue 3 迁移策略笔记—— 第14节：全局 API

• Vue 3 迁移策略笔记—— 第15节：全局 API 的 tree shaking

• Vue 3 迁移策略笔记—— 第16节：Inline Template 属性

• Vue 3 迁移策略笔记—— 第17节：Key 属性

• Vue 3 迁移策略笔记—— 第18节：按键修饰符

• Vue 3 迁移策略笔记—— 第19节：移除 $listeners

• Vue 3 迁移策略笔记—— 第20节：Props 的默认值函数不能访问this

• Vue 3 迁移策略笔记—— 第21节：渲染函数 API

• Vue 3 迁移策略笔记—— 第22节：Slots 的统一

• Vue 3 迁移策略笔记—— 第23节：Transition Class 的变化

• Vue 3 迁移策略笔记—— 第24节：Transition Group 不再需要设置根元素

• Vue 3 迁移策略笔记—— 第25节：v-on.native修饰符被移除

• Vue 3 迁移策略笔记—— 第26节：在组件上使用 v-model 的变化

• Vue 3 迁移策略笔记—— 第27节：v-if 和 v-for 的优先级

• Vue 3 迁移策略笔记—— 第28节：v-bind 合并行为

• Vue 3 迁移策略笔记—— 第29节：数组的监听