Vue组件中的data为什么必须是一个函数

心已赠人 2022-12-05 10:22 265阅读 0赞

在Vue的组件基础中有这样一句话：data必须是一个函数。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhcmVpbmFsb3Zl_size_16_color_FFFFFF_t_70][]

为什么data必须是一个函数呢？

我们来看Vue在声明式渲染中给出的一个demo：

<div id="app">{
       { message }}</div>
     
    
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })

在这个demo中data是一个对象，通过 new Vue 创建的 Vue 实例中，我们直接把data上的message属性通过模板渲染到页面上去了。这个data我们只在当前页面挂载的div\#app这个点上使用，但是组件是可以被复用的，所以我们全局注册一个组件来分析。

先假设将data作为一个对象:  
         我们前面说组件是可以被复用的，那么注册了一个组件本质上就是创建了一个组件构造器的引用，而真正当我们使用组件的时候才会去将组件实例化。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhcmVpbmFsb3Zl_size_16_color_FFFFFF_t_70 1][]

这里可以发现当使用组件的时候，虽然data是在构造器的原型链上被创建的，但是实例化的component1和component2却是共享同样的data对象,当你修改某一个实例的data对象的一个属性的时候，公用的data对象也会发生改变，这明显不是我们想要的效果。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhcmVpbmFsb3Zl_size_16_color_FFFFFF_t_70 2][]

这里可以看到，而当data是一个函数的时候，每一个实例的data属性都是独立的，不会相互影响了。

### 总结： ###

综上可知，如果data是一个函数的话，这样每复用一次组件，就会返回一份新的`data`，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份`data`，就会造成一个变了全都会变的结果。

所以说vue组件的data必须是函数。这都是因为js的特性带来的，跟vue本身设计无关。

js本身的面向对象编程也是基于原型链和构造函数，应该会注意原型链上添加一般都是一个函数方法而不会去添加一个对象了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhcmVpbmFsb3Zl_size_16_color_FFFFFF_t_70]: /images/20221123/32912fd60a08425f86ceb585e52aabe2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhcmVpbmFsb3Zl_size_16_color_FFFFFF_t_70 1]: /images/20221123/328cd6ccb25642d19f68f64dfc03ab12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhcmVpbmFsb3Zl_size_16_color_FFFFFF_t_70 2]: /images/20221123/73c897ee468c48569d6a3cd37d5c6348.png