目录
一、引言
在Vue CLI脚手架中一个组件的data选项必须是一个函数，以此保证每个组件实例，维护独立的一份数据对象。每次创建新的组件实例，都会新执行一次data 函数，得到一个新对象。对于Java后端开发的同学相信一定很熟悉，这就是面向对象的概念。data函数的使用与我们前面章节讲到的data对象的使用方法是一样的。
二、示例代码
2.1. 工程结构图
2.2. main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
2.3. App.vue
<template>
<div class="App">
<BaseCount></BaseCount>
<BaseCount></BaseCount>
<BaseCount></BaseCount>
</div>
</template>
<script>
import BaseCount from './components/BaseCount.vue'
export default {
components: {
BaseCount
}
}
</script>
<style>
.base-count {
margin: 20px;
}
</style>2.4. BaseCount.vue
<template>
<div class="base-count">
<button @click="count--">-</button>
<span>{{ count }}</span>
<button @click="count++">+</button>
</div>
</template>
<script>
export default {
// data必须是一个函数，以此保证每个组件实例维护独立的一个数据对象
data () {
console.log('调用data函数创建新的一个数据实例对象')
return {
count: 1314
}
}
}
</script>
<style>
</style>三、运行效果
我们可以看到，控制面板输出了三次日志，即App.vue中的三个BaseCount.vue组件分别通过data函数创建了独立的数据对象：
