mavengo 2022-03-17 04:17 采纳率: 80%
浏览 44
已结题

Vue3版本中Mixin的变更问题

以下是Vue3版本变迁中关于Mixin变更的内容。
问题:我看了一下Vue3的官方文档Mixin部分内容和原来的基本一样,但是在版本变迁文档中他却说会浅层次执行。但是我测试了一下Vue3混入的合并结果和2版本是一致的。官网关于Mixin的变更内容很费解,希望同僚给予解释。

img


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
  }
}

展开全部

  • 写回答

1条回答 默认 最新

  • _念_ 2022-03-17 06:47
    关注

    mixin各方都不推荐使用,存在很多的弊端。
    vue3的话,建议使用组合式api,和hooks

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
    _雪菜肉丝面_ 2022-03-17 07:02

    对!

    回复
    mavengo 2022-03-17 07:11

    我很少使用,就是在总结组合式api的时候顺带总结一下Mixin的不足,然后就发现了官方的变迁版本中给的例子有点让人费解。
    https://v3.cn.vuejs.org/guide/migration/data-option.html#mixin-%E5%90%88%E5%B9%B6%E8%A1%8C%E4%B8%BA%E5%8F%98%E6%9B%B4

    1
    回复
    _念_ 回复 mavengo 2022-03-17 08:00

    这没什么费解的吧,就是很简单,从深度合并变成了简单的$data合并。官方不推荐使用这玩意,所以在高版本中放弃了对他的维护支持。

    1
    回复
编辑
预览

报告相同问题?

问题事件

  • 系统已结题 3月24日
  • 已采纳回答 3月17日
  • 创建了问题 3月17日
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部