vue中的data为什么是一个函数？起到什么作用？

Posted 2022-09-20 水香木鱼

前言

在学习vue的时候，我们一直在思考的一件事：

组件的data数据为什么必须要以函数返回的形式，为什么不是简单的对象形式呢？

一.data为什么是一个函数

面试回答:

• 如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data(类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据)
• Object是引用数据类型，里面保存的是内存地址，单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

所以说vue组件的data必须是函数。

废话不多说 我们直奔主题

铛铛铛，请看

1. 组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方
2. 组件不管被复用了多少次，组件中的data数据都应该是相互隔离，互不影响的
3. 基于这一理念，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响

例子：

<template>
    <div class="title">
        <h1>按钮被点击了 count 次</h1>
        <button v-on:click="count++">点击</button>
    </div>
</template>
<script>
    export default 
      name: 'BtnCount',
      data () 
        return 
          count: 0
        
      
    
</script>
<style scoped>
    .title 
        background-color: red
    
</style>

该组件被复用了三次，但每个复用的地方组件内的count数据相互不受影响，它们各自维护各自内部的 count。

能有这样效果正是因为上述例子中的data不是一个单纯的对象，而是一个函数返回值的形式，所以每个组件实例可以维护一份被返回对象的独立拷贝，如果我们将上述例子中的data修改为：

data : 
   count: 0
 

那么就会造成无论在哪个组件里改变了count值，都会影响到其他两个组件里的count。

这是因为当data定义后，这就表示所有的组件实例共用了一份data数据，因此，无论在哪个组件实例中修改了data,都会影响到所有的组件实例。

总结

组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data【类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据】

注意： 而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

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

因为组件是可以复用的, JS里对象是引用关系, 如果组件data是一个对象, 那么在子组件中的data属性值会互相污染, 产生副作用。

所以一个组件的data选项必须是一个函数， 因此每个实例可以维护一份被返回对象的独立拷贝。new Vue的实例是不会被复用的，因此不存在以上问题。

1.首先从javascript原型链角度来解释为什么vue中的data必须是一个函数

1. 它是属于引用数据类型
2. Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了，那么其他的数据也随之而改变；

JavaScript只有函数构成作用域(注意理解作用域，只有函数构成作用域,对象的以及if()都不构成作用域)

当data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，就不会相互影响。

这都是因为js本身的特性带来的，跟vue本身设计无关。

总结：

• 根实例对象data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况

• 组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。

• 采用函数的形式，initData时会将其作为工厂函数都会返回全新data对象