解答如下
- 函數每執行一次，會分配新的內存地址。
- 函數返回新的對象，新的對象相互獨立，因此不會相互影響。
- 組件data的屬性只是在本地組件範圍內有效，採用函數返回的形式，不會造成跨組件的變量污染。
下面舉一個計數器的例子來詳細解釋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>計數器</title>
</head>
<body>
<div id="app">
當前數值：{{count}}
<button @click="count++">+</button>
<button @click="count--">-</button>
</div>
<script src="./js/vue.js"></script>
<script>
const vm = new Vue({
el:"#app",
data:{
count:0
}
})
</script>
</body>
</html>
1.首先，我們將下面這個計數器抽取成一個組件。
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<cpn></cpn>
<hr>
<cpn></cpn>
<hr>
<cpn></cpn>
<hr>
</div>
<template id="cpn">
<div id="app">
當前數值：{{counter}}
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</template>
<script src="./js/vue.js"></script>
<script>
Vue.component('cpn',{
template:'#cpn',
data(){
return {
counter:0
}
},
methods:{
increment(){
this.counter++
},
decrement(){
this.counter--
}
}
})
const vm = new Vue({
el:'#app'
})
</script>
</body>
</html>
瀏覽器頁面：
這是我們所希望的效果，組件之間相互獨立，互不影響。點擊計數器一併不會導致計數器二、三跟着變化。
2.接下來演示跨組件變量污染的情況（將返回的對象定義在外部，data內不會每次返回一個新的對象了）
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<cpn></cpn>
<hr>
<cpn></cpn>
<hr>
<cpn></cpn>
<hr>
</div>
<template id="cpn">
<div id="app">
當前數值：{{counter}}
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</template>
<script src="./js/vue.js"></script>
<script>
const obj = {
counter:0
}
Vue.component('cpn',{
template:'#cpn',
data(){
return obj
},
methods:{
increment(){
this.counter++
},
decrement(){
this.counter--
}
}
})
const vm = new Vue({
el:'#app'
})
</script>
</body>
</html>
瀏覽器界面：
點擊計數器一會導致計數器二、三跟着變化，這是我們在開發中不希望看到的。