vue中同一个页面屡次使用同一个组件的相互干扰问题

咱们知道，vue有一个重要的理念就是组件化，即将重复使用的功能点抽提出来做为组件，须要使用的页面只须要引用该组件便可获得相应的功能点。

而组件化的一个重要特性就是做用域隔离，即一个组件实例拥有一个私有的做用域，当在页面中引用了该组件以后，只有该组件实例能访问该做用域。

可是当在同一个页面屡次使用同一个组件的时候，若是只建立了一个实例，可是却对这个实例调用了两次，这两个调用就会形成相互干扰的问题，由于这时候这两个调用访问的是同一个做用域。好比有如今有一个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-双向绑定（我的理解是强行派生出新的对象，解除对原对象的引用，并将该新对象绑定到该组件调用上），可是总以为有点奇怪，由于这样只是在同一个做用域内解除了对同一个对象的屡次引用，不太符合组件化的设计理念与特性，并可能产生意料以外的问题，不是很喜欢这种方法。

 

"不少人都在告诉我要懂事，可是没有一我的告诉我要快乐。"