组件中的data为什么是个函数？前言1. vue中data为什么必须是个函数?

137 阅读 0 评论 91 点赞

我是靠谱客的博主无情火龙果，最近开发中收集的这篇文章主要介绍组件中的data为什么是个函数？前言1. vue中data为什么必须是个函数?，觉得挺不错的，现在分享给大家，希望可以做个参考。

在这里插入图片描述

前言

组件中的data为什么是函数，而不是对象呢？

我们带着问题去思考？如果组件中的data写成一个对象，这些实例使用的是同一个构造函数，但是由于JavaScript特性所导致，所有的组件实例对象当中，共用的是同一个data，就会形成当一个数据变更的时候，会导致所有的都跟着变。

Vue 中的 data 必须是个函数，因为当data是函数时，组件实例化的时候这个函数将会被调用，返回一个对象，计算机会给这个对象分配一个内存地址，实例化几次就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不变。

简单来说，就是为了保证组件的独立性和可复用性，如果data是个函数的话，每复用一次组件就会返回新的data，类似于给每个组件实例创建一个私有的数据空间，保护各自的数据互不影响。

一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。

而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。