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-雙向綁定（我的理解是強行派生出新的對象，解除對原對象的引用，並將該新對象綁定到該組件調用上），可是總以爲有點奇怪，由於這樣只是在同一個做用域內解除了對同一個對象的屢次引用，不太符合組件化的設計理念與特性，並可能產生意料以外的問題，不是很喜歡這種方法。

 

"不少人都在告訴我要懂事，可是沒有一我的告訴我要快樂。"