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

传统方式编写应用存在的弊端

不同界面使用相同的代码时，依赖关系混乱，修改样式时，会造成其他界面的样式随之改变

组件化编码

不同功能区域划分为不同的组件，多个界面共同使用的组件可抽象位公共组件进行复用

模块与组件、模块化与组件化

 模块

组件

模块化

组件化

非单文件组件

一个文件中包含 n 个组件

单文件组件

一个文件只包含一个组件

data的两种写法

第一种：对象式写法

data:{
   name:'尚硅谷'
}

第二种写法：函数式写法

data:function(){
   return{
     name:'尚硅谷'
   }
}

组件中只能使用 函数式写法

组件的创建就是被用来复用的，若A界面改变了A组件的data数据，B界面在使用A组件时，其中的数据也会随着A界面的改变 而变化，这是我们不希望看到的，因此通过函数的方式，在每次调用data函数式，都返回一个新的对象，就可以保证各个组件都有自己的一套独立的数据，不会互相造成影响。