您的位置:58脚本 > vuedatav Vue 3.0 Data选项

vuedatav Vue 3.0 Data选项

2023-04-14 03:32 VUE3教程

vuedatav Vue 3.0 Data选项

vuedatav Vue 3.0 Data选项

vuedatav

#概览

  • 非兼容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 选项已标准化为只接受返回 objectfunction

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

<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 的深度合并非常隐式,这让代码逻辑更难理解和调试。

阅读全文
以上是58脚本为你收集整理的vuedatav Vue 3.0 Data选项全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 58脚本 58jiaoben.com 版权所有 联系我们
桂ICP备12005667号-28 Powered by CMS