为什么data必须是一个函数？
避免组件在复用中data数据污染。
案例一：data是一个函数返回一个新对象
子组件：
提供两个按钮修改 count 和 展示 count
<template>
<div>
<button @click="count--">-</button>
<span style="padding: 0 10px">{{ count }}</span>
<button @click="count++">+</button>
</div>
</template
<script>
export default {
name: "CountItem",
data() {
return {
count: 0,
};
},
};
</script>
<style scoped></style>
父组件：
使用两次 count 组件
<template>
<div id="app">
<div>
<Count />
</div>
<div style="margin: 20px 10px;">
<Count />
</div>
</div>
</template>
<script>
import Count from './components/Count.vue'
export default {
name: 'App',
components: {
Count
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
页面展示：
修改 count 不会 影响复用的其他组件数据
原因：每次复用 count 组件 vue 会调用data函数 data函数返回的是一个对象 注意返回的对象是新创建的。
第一次使用count组件时 data函数返回一个新对象
第二次使用count组件时 data函数返回的还是一个新的对象
所以两次使用的count组件data函数返回的对象并不是同一个每次都是新的，而且 data函数内的this是当前组件的实例。从而避免了数据污染。
案例二： data是一个函数
因为组件内data必须是一个函数 所以这里 data 为了模拟是一个函数 就 返回一个旧对象
子组件：
<template>
<div>
<button @click="count--">-</button>
<span style="padding: 0 10px">{{ count }}</span>
<button @click="count++">+</button>
</div>
</template>
<script>
const data = { count: 0 };
export default {
name: "CountItem",
data() {
return data;
},
};
</script>
<style scoped></style>
父组件：
<template>
<div id="app">
<div>
<h1>Count 1 </h1>
<Count ref="count1" />
</div>
<div style="margin: 20px 10px;">
<h1>Count 2 </h1>
<Count ref="count2" />
</div>
</div>
</template>
<script>
import Count from './components/Count.vue'
export default {
name: 'App',
components: {
Count
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
页面展示：
这里不管我修改哪个组件的count。两个组件的count都是同步的。因为data函数每次都是返回的都是一个旧对象 并不是每次新创建的
