VUE3 入门教程 Vue 3.0 Data选项

2024-02-25 开发教程 VUE3 入门教程匿名 0℃

#概览

非兼容：data组件选项声明不再接收纯 JavaScript object，而需要 function声明。

当合并来自 mixin 或 extend 的多个 data返回值时，现在是浅层次合并的而不是深层次合并的(只合并根级属性)。

#2.x Syntax

在 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 Update

在 3.x，data选项已标准化为只接受返回 object的 function。

使用上面的示例，代码只有一个可能的实现：

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

#Mixin 合并行为变更

此外，当来自组件的 data()及其 mixin 或 extends 基类被合并时，现在将浅层次执行合并：

const Mixin = {
  data() {
    return {
      user: {
        name: 'Jack',
        id: 1
      }
    }
  }
}
const CompA = {
  mixins: [Mixin],
  data() {
    return {
      user: {
        id: 2
      }
    }
  }
}

在 Vue 2.x中，生成的 $data是：

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

在 3.0 中，其结果将会是：

{
  user: {
    id: 2
  }
}

#迁移策略

对于依赖对象声明的用户，我们建议：

将共享数据提取到外部对象并将其用作 data中的 property
重写对共享数据的引用以指向新的共享对象

对于依赖 mixin 的深度合并行为的用户，我们建议重构代码以完全避免这种依赖，因为 mixin 的深度合并非常隐式，这让代码逻辑更难理解和调试。

上一节： Vue 3.0 自定义元素交互

下一节： Vue 3.0 事件API

"VUE3 入门教程"的目录

VUE3 入门教程 Vue 3.0 Data选项

#概览

#2.x Syntax

#3.x Update

#Mixin 合并行为变更

#迁移策略