纵有疾风起
人生不言弃

新手vue爬坑经历-vue赋值(一)

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/qq_32544569/article/details/82818079


最近本人一直在学习vue,发现vue的数据绑定比起JQuery使用起来更加方便,不像以前在JQ里面苦逼的操作DOM节点,每次想要更新视图模板,都要在js里面写好多html,看着那些代码,心里就很是烦躁。

vue的好处就是视图和数据是绑定在一起的,我们可以通过改变数据从而改变视图的展示,比起以前操作的dom节点,本人还是觉得操作数据更加方便一些。

废话就先说到这里,最近在使用Vue的时候,总是遇到玄学问题,我在这里和大家分享下:

  1. vue里面的参数赋值的问题
    new Vue({
    	data: {
    		list1: [],
    		list2: []
    	},
    	ready: function() {
    		// 这里是将list2参数的值赋给list1
    		this.list1 = this.list2;
    	}
    });
    

    这样赋值确实是没有问题,list2的值确实是赋值给了list1,但是神奇的地方就是,如果你在后续的操作里面,修改list1的值,你会发现,list2的值也跟着修改了,就好像list1和list2这两个参数绑在了一起,只要有一个修改的,另一个就会修改,这个问题当时让我很是苦恼。
    最后通过查阅资料说是vue的深浅拷贝,这样的赋值会使这两个参数指向同一地址。最后我的解决办法如下:

    new Vue({
    	data: {
    		list1: [],
    		list2: []
    	},
    	ready: function() {
    		// 这里是将list2参数的值赋给list1
    		this.list1 = JSON.parse(JSON.stringify(this.list2));
    	}
    });
    

    这样赋值后,这两个参数就互不影响了,完全独立了。

以上就是我遇到vue赋值的问题了,如果有错误还请各路大神及时纠正,或者有其他的想法也可以互相讨论,新人第一次写文章,勿喷,谢谢。

未经允许不得转载:起风网 » 新手vue爬坑经历-vue赋值(一)
分享到: 生成海报

评论 抢沙发

评论前必须登录!

立即登录