V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ghostgril
V2EX  ›  2018

请教老铁们, vue 的 props 传递复杂的对象和数组嵌套的时候如何保证不修改父组件的数据呢

  •  
  •   ghostgril · 2018-01-15 17:42:48 +08:00 · 3349 次点击
    这是一个创建于 2503 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我之前都是递归复制一个新的多个数组的嵌套或者对象的嵌套。。其他人是怎么做的呢

    5 条回复    2018-01-16 10:14:39 +08:00
    ghostgril
        1
    ghostgril  
    OP
       2018-01-15 17:46:34 +08:00
    在 props 中传递的是对象或是数组,根据 JavaScript 的特性,传递过来的是引用类型,所以我在子组件中也是能够修改父组件的数据的。
    为了避免干扰父组件数据,难道每次都将 props 数据转换成深拷贝的局部变量或计算属性吗?
    如何优雅的方式解决这种双向数据?
    为什么 props 传递过来的数据不使用深拷贝?
    noe132
        2
    noe132  
       2018-01-15 19:11:07 +08:00
    理论上传过来的数据不应该做修改。
    既然要做修改,最简单就是深拷贝。
    JSON.parse(JSON.stringify(obj))
    或者需要修改的部分手动拷贝

    默认深拷贝会有性能上的影响,并且不是每一种情况下都需要这样处理。
    exonuclease
        3
    exonuclease  
       2018-01-15 21:20:58 +08:00 via Android
    immutable.js 拯救你 要不就干脆上 vuex
    ghostgril
        4
    ghostgril  
    OP
       2018-01-16 09:46:10 +08:00
    @exonuclease 这是在页面里创建一个新数据遇到的问题,提交保存之前都不是传到 vuex,那么只有使用 immutable.js 了吧?这是 react 的插件?
    exonuclease
        5
    exonuclease  
       2018-01-16 10:14:39 +08:00 via Android
    @ghostgril 这个库不绑定框架的啊 都可以用
    哦对 vuex 搞不定这个鬼问题
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2900 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 03:54 · PVG 11:54 · LAX 19:54 · JFK 22:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.