Web前端面试之Vue—快速理解为什么data属性是一个函数不是一个对象？

目录

实例定义data和组件定义data的不同

为什么不同？

组件简介：

---

实例定义data和组件定义data的不同

• vue实例的时候定义data属性既可以是一个对象，也可以是一个函数
• 组件中定义data属性，只能是一个函数

为什么不同？

1. Vue开发的应用为单页面应用，一般情况下只有一个Vue实例，所以实例中的数据可以在当前项目中共享，所以Vue实例中的data是一个对象
2. Vue组件的出现是为了组件中的视图和数据可以复用（可以简单理解为js中的函数封装），被复用的组件在不同的复用位置可能在操作不同的数据，所以每个组件的data数据必须相互独立，所以组件中的data是一个函数，函数内部返回一个只能让当前组件使用的对象数据，

即：

• 实例中的data可以全局使用 （全局意味着可共享，大家都可以用），所以是对象
• 组件中的data为其实例对象局部使用（局部意味着不共享，只能自己用），所以为返回对象的函数，防止多个组件实例对象之间共用一个data，产生数据污染，采用函数的形式，initData时会将其作为工厂函数都会返回全新data对象

组件简介：

【精选】Vue 组件化编程、VueComponent实例对象_vuecomponent撖寡情_YuLong~W的博客-CSDN博客