现象描述:

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. hexo+腾讯云

    hexo+腾讯云主机搭建博客 参考链接1 参考链接2 参考链接3 说明:不建议用hexo在云主机上搭建博客,感觉多此一举,建议hexo+github, wordpress+云主机(宝塔界面更快哦) 一 ...

  2. 【备忘】下载Oracle 8u202及之前的商用免付费版本JDK

    访问地址: https://www.oracle.com/java/technologies/javase/javase8-archive-downloads.html 虽然是商用免付费版本,下载仍需 ...

  3. .NET GC 实时监控 dotnet-gcmon 介绍

    今天介绍一个新的诊断工具 dotnet-gcmon, 也是全局 .NET CLI 工具, 它可以监控到 .NET 程序的 GC, 能获取到的信息也很详细, 另外 maoni 大佬也是其中的开发者之一. ...

  4. [cf1261F]Xor-Set

    构造一棵权值范围恰为$[0,2^{60})$的权值线段树,考虑其中从下往上第$h$层($0\le h\le 60$)中的一个区间,假设其左端点为$l$,即$[l,l+2^{h})$ 这样的一个区间具有 ...

  5. 数字逻辑实践5->Verilog语法 | wire 与 reg 的选择与特性

    问题起因:最初学习数字逻辑设计理论的时候还没有注意到,在实验课上写代码的时候发现了一个问题: 对于源码模块的变量定义,何时定义为reg.何时定义为wire?它们各自又有什么特性和物理意义? 1. wi ...

  6. Atcoder Grand Contest 021 F - Trinity（dp+NTT）

    Atcoder 题面传送门 & 洛谷题面传送门 首先我们考虑设 \(dp_{i,j}\) 表示对于一个 \(i\times j\) 的网格,其每行都至少有一个黑格的合法的三元组 \((A,B, ...

  7. android Fragment跳转Fragment

    android Fragment跳转Fragment,最新的android studio3 在系统模板建立的BottomNavigationView 中跳转方式 此版本下不能用FragmentMana ...

  8. 通过yum安装 memcache

    . 通过yum安装 复制代码代码如下: yum -y install memcached#安装完成后执行:memcached -h#出现memcached帮助信息说明安装成功 2. 加入启动服务 复制 ...

  9. 面向Web应用的并发压力测试工具——Locust实用攻略

    1. 概述 该方案写作目的在于描述一个基于Locust实现的压力测试,文中详细地描述了如何利用locustfile.py文件定义期望达成的测试用例,并利用Locust对目标站点进行并发压力测试. 特别 ...

  10. python写的多项式符号乘法

    D:\>poly.py(x - 1) * (x^2 + x + 1) = x^3 - 1 1 import ply.lex as lex # pip install ply 2 import p ...