Vue自学：为什么组件data必须是个函数
程序员文章站
2022-03-01 17:42:14
...
<!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>