<!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>
