vue关于this.a=this.b,改变this.b的数据问题

author author     2023-04-05     515

关键词:

参考技术A 因为需要对请求到的数据进行处理后在渲染到视图上,所以借助 handleDate 变量来对原始的
数据 data2 进行处理,

如上当 this.data2 = this.handleDate 时,最后渲染的数据发现 handleDate 的数据也被改变了。
解决方法:

因为
1、在vue中 this.A = this.B,没有进行深层赋值,只是把this.A的地址指向了与this.B相同的地址,所有对于A的修改会影响到B
2、解决相互影响的思路是在this.A必须是新建的一个对象,这样才能保证不被指向同一地址,属性修改不会相互影响。
this.A=JSON.parse(JSON.stringify(this.B));
将对象转成字符串剔除对象属性后,再转换成对象赋值,这样能解决指向相同地址修改会相互影响的问题。里面的this.A= JSON.parse(JSON.stringify(this.B)); 如果是直接this.A= this.B的话会把 this.A替换为this.B然后再把this.B赋值给this.A相当于 this.A= this.A所以先转json字符串 再转数组 然后赋值给this.A这样不会相互影响

关于js中的原型问题

比如一个方法:functionA(a)this.a=a;this.b=function()alert(this.a);和functionA(a)this.a=a;A.prototype.b=function()alert(this.a);这两者的alert(this.a)的值应该都是一样的,为什么要使用prototype,A.prototype.b=function()alert(this.a);这段代码是什么意思?1、为了... 查看详情

vue的data中使用this.$route赋值,在this.$options.data()重置的时候报错问的题

参考技术A问题项目里遇到一个问题,用this.data,this.$options.data());//有问题!!!,methodA()//dosth.,methodB()//通过用户操作调用this.A.a&&this.A.a();//this.A.aisundefined,this.Bisundefined!!!`调用resetData()之后,再调用methodB()时,this.A.a和this.B是un... 查看详情

运行程序,解读this指向---case6

functionParent(){this.a=1;this.b=[1,2,this.a];this.c={ckey:5};this.show=function(){console.log(this.a,this.b,this.c.ckey);}}functionChild(){this.a=2;this.change=function(){this.b.push(this.a);this.a=t 查看详情

解决vuea对象赋值给b对象,修改b属性会影响到a的问题

实际在vue中this.A=this.B,没有进行深层赋值,只是把this.A的地址指向了与this.B相同的地址,所有对于A的修改会影响到B。解决相互影响的思路是在this.A必须是新建的一个对象,这样才能保证不被指向同一地址,属性修改不会相互影... 查看详情

vue-计算属性与侦听器(代码片段)

...。get:function()returnthis.firstName+‘‘+this.lastName,//setter用来改变传递过来的值,发生改变的时候,同时让数据的内容也发生改变。set:function(newValue)varnames=newValue.split(‘‘)this.firstName=names[0]this.lastName=names[names.length-1]<el-buttontype="dang... 查看详情

this的指向问题

this的指向问题   第一种:指向调用者     functiona()       console.log(this)//Window          a()//每一个函数前面都会隐式的调用Window,所以相当于Window.a();     vara=       b:‘1‘,    ... 查看详情

es6箭头函数this指向问题(代码片段)

es5中this的指向varfactory=function()this.a=‘a‘;this.b=‘b‘;this.c=a:‘a+‘,b:function()returnthis.a;console.log(newfactory().c.b());//a+通过es5的语法调用,返回的是a+,this的指向是该函数被调用的对象,也就是说函数被调用的时候,这个this指向的是... 查看详情

javascript原型链(evernote)

1.简单的原型链:varsong=function(){this.a=5;this.b=6;}//functionsong(){  this.a=5;}song.prototype={add:function(a,b){returna+b+this.a+this.b;},jian:function(a,b){returnb-a;}}varjum=function(){this. 查看详情

一道面试题就能测出你的javascript水平(代码片段)

functionParent()this.a=1;this.b=[1,2,this.a];this.c=demo:5;this.show=function()console.log(this.a,this.b,this.c.demo);functionChild()this.a=2;this.change=function()this.b.push(this.a);this.a=this.b.length;this.c.demo=this.a++;Child.prototype=newParent();va... 查看详情

java面向对象-------this的使用

packagejava面向对象;/*this关键字的使用,this表示当前创建好的对象*/publicclassTestThisinta,b,c;publicTestThis(inta,intb)//1、通过this来区分局部变量和成员变量this.a=a;this.b=b;publicTestThis(inta,intb,intc)//2、通过this调用上面的构造方法,必须放在第... 查看详情

对象或数组或数组对象的深拷贝

... if(typeofsource[item]===‘object‘)      sourceCopy[item]=this.a.objDeepCopy?this.a.objDeepCopy(source[item]):(this.a.dp&&this.a.dp.objDeepCopy)?this.a.dp.objDeepCopy(source[item]):      this.b.objDeepCopy?this.b.objDeepCopy(source[item]):(this.b.dp&&this... 查看详情

一道面试题就能测出你的javascript水平(代码片段)

functionParent()this.a=1;this.b=[1,2,this.a];this.c=demo:5;this.show=function()console.log(this.a,this.b,this.c.demo);functionChild()this.a=2;this.change=function()this.b.push( 查看详情

关于组件(不定时更新)

1.组件的定义和加载tabview.css.menu{}.content{}tabview.jsvarabc=5;functionTabView(cfg){this.a=cfg.a;this.b=cfg.b;}TabView.prototype={c:function(){abc++},d:function(){abc--}}tabview.html<head><linkrel= 查看详情

一道有意思的javascript题目(代码片段)

今天在网上看到一道题,觉得很有意思就把它抄下来解了。题目是这样的:1functionParent()2this.a=1;3this.b=[1,2,this.a];45this.c=demo:5;6this.show=function()7console.log(this.a,this.b,this.c.demo);8/*alert(this.b);*/91011functionChil 查看详情

关于静态变量和静态方法的测试

packagecs.cwnu;publicclassStaticTest inta=1;//非静态变量 staticintb=2;//静态变量 voidsayA()//非静态方法 this.a=2; System.out.println(a); this.b=3; System.out.println(b); sayB(); sayC(); staticvoidsayB()/ 查看详情

vue2中computed和watch的异同

...可以触发computed重新构造给com赋值;computed:com:function()returnthis.a+this.b+this.c2.watch:就是观察本身,当本身值变化时触发watch;例如:wat:function(data)...当自身变化时执行wat函数;使用场景(一对多):watch元素发生变化时,我们可以在函数里分... 查看详情

javascript基础修炼——一道十面埋伏的原型链面试题(代码片段)

在基础面前,一切技巧都是浮云。题目是这样的要求写出控制台的输出.functionParent()this.a=1;this.b=[1,2,this.a];this.c=demo:5;this.show=function()console.log(this.a,this.b,this.c.demo);functionChild()this.a=2;this.change=functio 查看详情

012天this详解上(代码片段)

我们知道,this对象在运行时基于函数的执行环境绑定的:在全局函数中,this等于window,而当this某个对象的方法调用时,this等于那个对象。1.this的绑定形式1.默认绑定2.隐式绑定3.显示绑定4.英绑定5.new绑定2.五种绑定的优先级 ... 查看详情