Vue 组件的data为什么是一个函数

👁 2021-02-21

了解为什么Vue组件的data是一个函数

Vue组件是可以复用的，每个组件都会各自独立维护它的数据。因为每用一次组件，就会有一个它的新实例被创建。一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。如果单纯的写成对象，那么所有的组件实例都会共享同一份数据。

Child.vue

<template>
    <div class="box">
        <h3>子组件--------{{count}}</h3>
        <button @click="add" class="btn">+</button>
    </div>
</template>
<script>
export default {
    data(){
        return {
            count: 0
        }
    },
    methods: {
        add(){
            this.count++
        }
    }
}
</script>
<style>
.box {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.btn {
    width: 30px;
    height: 20px;
    text-align: center;
}
</style>

App.vue

<template>
<div id="app">
    <h1>Vue 组件的data为什么是一个函数</h1>
    <Child></Child>
    <Child></Child>
    <Child></Child>
</div>

</template>

<script>
import Child from './components/Child.vue'
export default {
    name: 'App',
    components: {
        Child
    },
    data(){
        return{      
        }
    },

}
</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>