Vue自学：为什么组件data必须是个函数

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <title>Vue自学：为什么组件data必须是个函数</title>
</head>
<body>
    <div id="app">
        <cpn></cpn>
        <cpn></cpn>
        <cpn></cpn>
    </div>
</body>
<!-- 所使用的template模板标签内，必须再嵌套一层div,否则会显示不全 -->
<template id="cpn">
    <div>
        <h1>当前计数值为:{{message}}</h1>
        <button type="button" v-on:click="add">+</button>
        <button type="button" v-on:click="reduce">-</button>
    </div>
</template>
<script type="text/javascript">
    //子组件
    Vue.component('cpn',{
        template:'#cpn',
        //data必须是个函数，原因是函数在复用时可以做到唯一性
        //当data不是一个函数的时候，组件标签在复用的时候，会使得数据重复错乱
        data(){
            return {
                message:0,
            }
        },
        methods:{
            add(){
              this.message++
            },
            reduce(){
              this.message--
            }
        }
    })
    //父组件
    const app = new Vue({
        el:'#app',
        data:{
        },
        methods:{
        }
    })
    //为什么data需要是一个函数
    //函数内部本身是一个独立的数据栈
    // function test(x,y){
    //     let q = x;
    //     let w = y;
    //     console.log(q,w);
    // }
    // let obj1 = test(1,2)
    // let obj2 = test(3,4)
    // let obj3 = test(5,6)
    // console.log(obj1,obj2,obj3)
    //当函数内部引用的东西是外部常量时，当外部常量事先被更改后
    //再次打印函数，整个变量的值都会被改变
    const obj = {
        name:'wang xiao er',
        age:'18',
    }
    function abc(){
        return obj
    }
    let obj1 = abc()
    let obj2 = abc()
    let obj3 = abc()
    obj1.name = 'koby'
    console.log(obj1,obj2,obj3)
</script>
</html>
相关文章
