vue中同⼀个页⾯多次使⽤同⼀个组件的相互⼲扰问题
我们知道，vue有⼀个重要的理念就是组件化，即将重复使⽤的功能点抽提出来作为组件，需要使⽤的页⾯只需要引⽤该组件即可得到相应的功能点。
javascript登录注册界面
⽽组件化的⼀个重要特性就是作⽤域隔离，即⼀个组件实例拥有⼀个私有的作⽤域，当在页⾯中引⽤了该组件之后，只有该组件实例能访问该作⽤域。
但是当在同⼀个页⾯多次使⽤同⼀个组件的时候，如果只创建了⼀个实例，但是却对这个实例调⽤了两次，这两个调⽤就会造成相互⼲扰的问题，因为这时候这两个调⽤访问的是同⼀个作⽤域。⽐如有现在有⼀个yanggb组件，我引⼊到我的页⾯中（创建了⼀个组件实例），然后调⽤两次（在页⾯上调⽤组件实例两次），那么当我给第⼀个调⽤绑定的对象变量的⼀个属性赋值了100，那么第⼆个调⽤绑定的同⼀个对象变量的该属性也会被赋值100，因为这两个调⽤在同⼀个作⽤域内绑定了同⼀个对象变量，⽽JavaScript内⼀切对象皆为引⽤，也就导致第⼆个调⽤的值跟着第⼆个调⽤的值变化了。
// 引⽤yanggb组件并创建⼀个实例
const yanggb = () => import('@/components/yanggb')
// 注册该组件实例
components: { yanggb }
// 在页⾯上两次调⽤该组件实例
<yanggb :value="100"></yanggb>
<yanggb></yanggb>
这个时候，如果该组件是直接显⽰的:value属性中绑定的值的话，那么两个调⽤都会显⽰100的值。
其实解决办法在这⾥已经呼之欲出了，既然创建⼀个实例调⽤两次会相互影响，那么我创建两个实例分别调⽤⼀次不就不会相互⼲扰了吗？我们来试⼀下。
// 引⽤同⼀个yanggb组件但创建两个个实例
const yanggb = () => import('@/components/yanggb')
const yanggb1 = () => import('@/components/yanggb')
// 注册两个组件实例
components: { yanggb, yanggb1 }
// 在页⾯上分别调⽤两个组件实例
<yanggb :value="100"></yanggb>
<yanggb1></yanggb1>
那么这个时候因为两个实例拥有相互独⽴的私有作⽤域，也就不会导致相互⼲扰的结果了，第⼆个实例的调⽤不会显⽰100的值。
PS：以上的【实例】和【调⽤】相关字眼是个⼈的理解，只是为了⽅便理解，并不⼀定正确。
另外，在解决问题的过程中，查到⼀些相关的解决⽅案，其中⼀个是使⽤JSON.stringify()和JSON.parse()两个⽅法配合使⽤来RE-双向绑定（个⼈理解是强⾏派⽣出新的对象，解除对原对象的引⽤，并将该新对象绑定到该组件调⽤上），但是总觉得有点奇怪，因为这样只是在同⼀个作⽤域内解除了对同⼀个对象的多次引⽤，不太符合组件化的设计理念与特性，并可能产⽣意料之外的问题，不是很喜欢这种⽅法。
"很多⼈都在告诉我要懂事，但是没有⼀个⼈告诉我要快乐。"

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。