我是怎么学Vue16的：为什么组件的数据一定是函数

时间：2023-04-01 12:31:31 vue.js

组件的数据定义在哪里？以前，组件的数据是写在标签中的。现在希望组件的数据可以动态变化：数据变化了，组件的显示也随之变化。组件的数据在哪里定义的？注册组件时，数据写入组件自己的数据属性中。以全局组件为例，注册组件时指定数据：

内容

为什么组件数据需要保存在component，而不是保存在实例中？因为一个实例有很多组件，如果所有的数据都放在vue实例中，那么vue实例会很臃肿，所有的vue组件都应该有自己保存数据的地方：data属性中。data属性必须是一个函数，这个函数必须返回一个对象，里面存储数据。为什么组件的数据属性必须是一个函数？案例：在前面的计数器案例中，计数器被封装成一个组件，使用时只需要引用标签即可。

当前计数：{{counter}}

分析：三个组件使用同一个数据对象吗？不。因为data是一个函数，每次创建组件都会调用data函数，每次调用data函数都会返回一个新的对象。data(){}是函数data(){}的简写。这里的三个组件在创建的时候调用了三次数据函数，每次都返回一个新的数据。这样三个数据分别占用三个内存地址，互不影响。如果想让他们互相交互，应该怎么写呢？constobj={counter:0}Vue.component('cpn',{template:'#cpn',data(){returnobj},methods:{increment(){this.counter++},decrement(){this.counter--}}})这样写，三个组件的数据指向同一个内存地址，如果修改其中一个组件，另外两个也会改变。

我是怎么学Vue16的：为什么组件的数据一定是函数

{{title}}

当前计数：{{counter}}