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

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

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

组件化编码

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

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

 模块

1. 理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件

2. 为什么: js 文件很多很复杂

3. 作用: 复用 js, 简化 js 的编写, 提高 js 运行效率

组件

1. 理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image…..)

2. 为什么: 一个界面的功能很复杂 3. 作用: 复用编码, 简化项目编码, 提高运行效率

模块化

当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。

组件化

当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用

非单文件组件

一个文件中包含 n 个组件

单文件组件

一个文件只包含一个组件

data的两种写法

第一种：对象式写法

data:{
   name:'尚硅谷'
}

第二种写法：函数式写法

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

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

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