Vue中 = 和 : 赋值的差异,引用传递和值传递

在Vue开发中,遇到一个现象:通过'='赋值的方式改变函数内声明的变量,会影响到data中的原始数据,这是因为Vue中的数据传递涉及到引用和值的区别。当直接修改对象时,实则是进行了引用传递,导致源数据也被改变。为了解决这个问题,使用新对象来接收和处理数据,避免了对原数据的影响。
摘要由CSDN通过智能技术生成

今天开发遇到一个问题,在函数中声明一个变量来(通过=)接收data中的对应的一个变量,但是改变申明的这个变量后原变量的字段也会一同改变,formData中的值直接和表单绑定的,直接做加密密码栏就会变成32位加密后的字符串,看着不太合适所以用新对象接收并完成加密来解决这个问题,于是就出现了这种值传递和引用传递的区别理解
这样看来就很类似java中的引用传递,改变会直接影响带源数据,

data() {
   
	        return {
   
				formData: {
   
					username: 'admin',
					password: 'xxxxxxxxxxx'					
				}
	        }
	    
Vue2,双向绑定的原理是通过使用Object.defineProperty()方法对数据对象进行劫持。当数据对象的属性被访问或修改时,Vue会通过getter和setter方法来监听数据的变化,并在需要更新视图的时候进行响应式更新。 当使用v-model指令时,Vue2会根据表单元素的类型(如input、textarea、select等)自动为其添加对应的事件监听器,当表单元素的值发生变化时,会触发相应的setter方法,从而更新数据对象的属性值。反过来,当数据对象的属性值发生变化时,Vue会触发getter方法来更新绑定的表单元素的值,实现双向绑定。 而在Vue3,双向绑定的原理有所改变。Vue3使用了Proxy对象来代替Vue2的Object.defineProperty()方法。Proxy对象可以拦截并自定义对目标对象的操作,包括属性的读取、赋值、删除等操作。通过使用Proxy对象,Vue3能够更直接地监听数据的变化。 在使用新的v-model指令时,Vue3通过监听表单元素的“模型更新”事件来实现双向绑定。当表单元素的值发生变化时,Vue会触发“模型更新”事件,并将新的值传递给数据对象,然后通过Proxy对象拦截并更新数据对象的属性值。反过来,当数据对象的属性值发生变化时,Vue会触发“模型更新”事件,从而更新绑定的表单元素的值。 总而言之,无论是Vue2还是Vue3,双向绑定的本质都是通过数据劫持和事件监听来实现的,只是在具体的实现方式上有所差异
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值