vue中data必须是一个函数2. data是对象时复用组件

对象为引用类型，当复用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改；而使用返回对象的函数，由于每次返回的都是一个新对象（Object的实例），引用地址不同，则不会出现这个问题（因为js本身的特性带来的,跟vue本身设计无关）

data是函数时复用组件

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title></title>
</head>

<body>
    <div id="app">
        <world ref="world"></world>
        <world ref="world"></world>
        <world ref="world"></world>
        <world ref="world"></world>
        <world ref="world"></world>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: function () { 
            return {
                message: 'hello vue.js.'
            }
        },
        components: {
            'world': {
                name: "world",
                template: '<button @click="addData">我被点击{{count}}次</button>',
                data() { // 按照函数返回值的方式书写
                    return {
                        count: 0
                    }
                },
                methods: {
                    addData() {
                        this.count++
                    }
                },
            },
        },
        watch: {

        },
        computed: {

        },
        created() {
        },
        mounted() {

        },
        methods: {},
    });
</script>

</html>

被复用的world组件中修改count属性值互不影响

2. data是对象时复用组件

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title></title>
</head>

<body>
    <div id="app">
        <world ref="world"></world>
        <world ref="world"></world>
        <world ref="world"></world>
        <world ref="world"></world>
        <world ref="world"></world>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: function () {
            return {
                message: 'hello vue.js.'
            }
        },
        components: {
            'world': {
                name: "world",
                template: '<button @click="addData">我被点击{{count}}次</button>',
                data:{ //按照对象的方式
                    count: 0  
                },
                methods: {
                    addData() {
                        this.count++
                    }
                },
            },
        },
        watch: {

        },
        computed: {

        },
        created() {
        },
        mounted() {

        },
        methods: {},
    });
</script>

</html>

提示data必须是函数