vue中需要理解的几个概念

一、对于MVVM的理解

MVVM 是 Model-View-ViewModel 的缩写

• Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
• View 代表视图模型，它负责将数据模型转化成UI 展现出来。View 层不负责处理状态，View 层做的是数据绑定的声明、 指令的声明、 事件绑定的声明。
• ViewModel监听数据的改变和控制视图行为、处理用户交互，它就是一个同步View 和 Model的对象，连接Model和View。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 View 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上；

ViewModel通过双向数据绑定把View层和Model层连接起来，而View和Model之间的同步工作完全是自动的，无需人为干涉，因此开发者只需要关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理；

MVVM优缺点

• 优点：
  1）分离视图（View）和模型（Model）,降低代码耦合，提高视图或者逻辑的重用性
  2）提高可测试性： ViewModel的存在可以帮助开发者更好地编写测试代码
  3）自动更新dom: 利用双向绑定,数据更新后视图自动更新,让开发者从繁琐的dom操作中解放
• 缺点：
  1）Bug很难被调试：数据绑定使得一个位置的Bug被快速传递到别的位置，要定位原始出问题的地方就变得不那么容易了。另外，数据绑定的声明是指令式地写在View的模版当中的，这些内容是没办法去打断点debug的
  2）一个大的模块中model也会很大，虽然使用方便也并保证了数据的一致性，当时长期持有，不释放内存就造成了花费更多的内存
  3）对于大型的图形应用程序，视图状态较多，ViewModel的构建和维护的成本都会比较高

二、vue框架与jQuery类库的区别

• Vue直接操作视图层，它通过Vue对象将数据和View完全分离开来了。对数据进行操作不需要引用相应的DOM节点，只需要关注逻辑，完全实现了视图层和逻辑层的解耦；
• query的操作是基于DOM节点的操作，jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的js的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。它的优势在于良好的封装和兼容，使调用简单方便。

三、vue的生命周期

Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

四、vue-cli是什么？

Vue.js提供一个官方命令行工具，可用于快速搭建大型单页应用（在一个完成的应用或者站点中，只有一个完整的HTML页面，这个页面有一个容器，可以把需要加载的代码（以组件的方式）插入到该容器中）。

该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

五、vuex是什么？

Vuex 类似 Redux 的状态管理器，用来管理Vue的所有组件状态。

六、vue组件中的data为什么是一个函数？

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

类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

七、computed和watch有什么区别?

• computed
  1、computed是计算属性,也就是计算值
  2、computed具有缓存性,computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算
  3、computed适用于计算比较消耗性能的计算场景
• watch
  1、Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。
  2、无缓存性，页面重新渲染时值不变化也会执行