现象描述:

vue 在使用的时候,当table绑定了某个data的时候.假如某个el-table-column下面的有个方法传参(data.row),然后在方法中用一个obj=data.row.(这里是浅拷贝).如果在这个方法中把这个参数给了另一个v-model的数据,操作令一个元素的时候会同步更改table中的传参的那一行的数据.这种传参方式是浅拷贝,多个地址指向同一个堆,所有两方会一起修改.

原因:

1.vue的双向绑定,数据更改同时更改视觉展示

2.函数的形参和实参的传递方式是浅拷贝.

解决方案:

1.传递实参的时候,先深拷贝一个数据,再传给函数.

2.形参接收实参的时候不用"=",而是将形参深拷贝一份.再操作拷贝的那份.

深拷贝的方式:

　　1.先JSON.stringify()和 再JSON.parse()

　　  2.for....in获取所有属性以及值,并且给另一个对象(以及其他遍历属性的方法).

3.object.assign()方式直接返回一个新对象

vue双向绑定和深浅拷贝的更多相关文章

  1. vue双向绑定的原理及实现双向绑定MVVM源码分析

    vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...

  2. IOS自带输入法中文不触发KEYUP事件导致vue双向绑定错误问题

    先上图: 可以看到输入框中的内容和弹出框的内容不一致, <input class="am-fr labRight" id="txcode" type=&q ...

  3. Vue双向绑定原理，教你一步一步实现双向绑定

    当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...

  4. 梳理vue双向绑定的实现原理

    Vue 采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty来劫持数据的setter,getter,在数据变动时发布消息给订阅者,订阅者收到消息后 ...

  5. vue双向绑定原理分析

    当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/jiangzhenf ...

  6. vue双向绑定原理及实现

    vue双向绑定原理及实现 一.总结 一句话总结:vue中的双向绑定主要是通过发布者-订阅者模式来实现的 发布 订阅 1.单向绑定和双向绑定的区别是什么? model view 更新 单向绑定:mode ...

  7. vue双向绑定原理源码解析

    当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/maxlove123 ...

  8. Vue双向绑定实现原理demo

    一.index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  9. Vue双向绑定原理（源码解析）---getter setter

       Vue双向绑定原理      大部分都知道Vue是采用的是对象的get 和set方法来实现数据的双向绑定的过程,本章将讨论他是怎么利用他实现的. vue双向绑定其实是采用的观察者模式,get和s ...

随机推荐

  1. ubuntu更換清華軟件源

    打开软件源的编辑sudo gedit /etc/apt/sources.list 软件源: Ubuntu--更改国内镜像源(阿里.网易.清华.中科大) 打開軟件源文件進行修改: 使用 sudo vim ...

  2. soft and hard limit

    soft限制了资源使用上限; soft可调整; hard限制了soft上限; 普通用户可使用ulimit -H调低hard limit. 限制的是一个进程可用资源, 而不是某个用户总和. man se ...

  3. Spring Aop面向切面编程&&自动注入

    1.面向切面编程 在程序原有纵向执行流程中,针对某一个或某一些方法添加通知,形成横切面的过程叫做面向切面编程 2.常用概念 原有功能:切点,pointcut 前置通知:在切点之前执行的功能,befor ...

  4. [loj2049]网络

    考虑整体二分,假设二分到区间$[l,r]$,即要对若干个询问,判断这些询问的答案与$mid=\lfloor\frac{l+r}{2}\rfloor$的关系 根据题意,答案$\le mid$等价于重要度 ...

  5. [atARC099F]Eating Symbols Hard

    记操作序列为$S$,令$h(S)\equiv \sum_{i}a_{i}x^{i}(mod\ p)$(其中$a_{i}$为操作后的结果) (以下我们将$S$看作字符串,相邻即拼接操作) 对于操作,有$ ...

  6. [nowcoder5667K]Keyboard Free

    不妨设$r1\le r2\le r3$,令$f(\alpha)=E(S_{\Delta}ABC)$,其中AB坐标分别为$(r_{1},0)$和$(r_{2}\cos \alpha,r_{2}\sin ...

  7. 单&双&单|双||的区别

    System.out.println(true|true);//true System.out.println(true|false);//true System.out.println(false| ...

  8. CSS Web Fonts 网络字体

    Fonts 1. CSS font-family 在 CSS 中,可以使用 font-family 属性来指定字体,浏览器渲染文字时候会根据这个属性应用于元素.如果没有指定这个属性或者指定的字体不存在 ...

  9. Python+selenium 之xpath定位

  10. Identity Server 4 从入门到落地（二）—— 理解授权码模式

    Identity Server 的目的是认证和授权,我们需要理解认证和授权的工作过程.这就需要了解OAuth 2.0的四种授权模式,下面这张图是授权码模式的工作过程,至少我在一开始看得一头雾水: 现在 ...