vue

1、vue的优点

• 轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ；

• 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；

• 双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单；

• 组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势；

• 视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；

• 虚拟DOM：dom 操作是非常耗费性能的，不再使用原生的 dom 操作节点，极大解放 dom 操作，但具体操作的还是 dom 不过是换了另一种方式；

• 运行速度更快：相比较于 react 而言，同样是操作虚拟 dom，就性能而言， vue 存在很大的优势。

2、vue和react的区别

1、 相同：

• 响应式（Reactive）。两个框架都是一种类似 VM 的架构，将状态从视图层分离出来，开发者只需要关注业务逻辑，不需要直接操作 DOM 。当应用发生改变时，我们只需要更新状态即可，框架会自动帮我们重新渲染页面。
• 组件化（Composable）。一个页面，可以拆分成一棵嵌套的组件树，我们只需要开发一个个组件即可，同一个组件可以在多个地方使用，这样就提升了代码的复用性和可维护性。
• Virtual DOM。框架在操作真实 DOM 之前，会先在内存中生成虚拟 DOM，最后再批量操作真实 DOM，以提高性能。

2、不同：

• 响应式原理不同；
• Vue 推荐使用模版的方式定义组件，React 推荐使用 JSX；
• React 推荐使用不可变的数据；

3、Vue的响应式原理

vue在创建的时候会遍历一遍data的对象，将每个属性通过object.defineProperty的set和get来监听数据的变化， 在vue中还有一个用来记录这些被依赖的值的对象叫做watcher，当我们setter时，它会去通知watcher我们这个值变了，然后新值是什么，watcher接到通知修改值后，会去调用组件的render函数生成新的虚拟DOM树，然后去更新组件页面

4、双向数据绑定的原理

它会使用obsever遍历一遍data对象，用object.defineProperty给每个属性添加set和get方法，做数据劫持监听，当我们对data中的数据重新赋值时，vue会监听到，然后vue会使用dep.notify()循环遍历每一个订阅者，使用update通知每一个订阅者，订阅者用最新的数据更新dom。

5、使用 Object.defineProperty() 来进行数据劫持有什么缺点？

在对一些属性进行操作时，使用这种方法无法拦截，比如通过下标方式修改数组数据或者给对象新增属性，这都不能触发组件的重新渲染，因为 Object.defineProperty 不能拦截到这些操作。更精确的来说，对于数组而言，大部分操作都是拦截不到的，只是 Vue 内部通过重写函数的方式解决了这个问题。

6、MVVM、MVC、MVP的区别

MVC

MVC 通过分离 Model、View 和 Controller 的方式来组织代码结构。其中 View 负责页面的显示逻辑，Model 负责存储页面的业务数据,Controller 层是 View 层和 Model 层的纽带，它主要负责用户与应用的响应操作，当用户与页面产生交互的时候，Controller 中的事件就会被触发，通过调用 Model 层来完成对数据的修改，然后 Model 层再去通知 View 层更新

MVVM

Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。 这种模式实现了 Model和View的数据自动同步，因此开发者只需要专注于数据的维护操作即可，而不需要自己操作DOM。

7、Computed 和 Watch 的区别

Computed：

一个属性受多个属性影响

• 它支持缓存，只有依赖的数据发生了变化，才会重新计算
• computed的值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data声明过，或者父组件传递过来的props中的数据进行计算的。
• 如果一个属性是由其他属性计算而来的，这个属性依赖其他的属性，一般会使用computed
• 如果computed属性的属性值是函数，那么默认使用get方法，函数的返回值就是属性的属性值；在computed中，属性有一个get方法和一个set方法，当数据发生变化时，会调用set方法

Watch：

一个属性影响多个属性

• 它不支持缓存，数据变化时，它就会触发相应的操作
• 支持异步监听
• 监听的函数接收两个参数，第一个参数是最新的值，第二个是变化之前的值
• 当一个属性发生变化时，就需要执行相应的操作

那么计算属性的缓存有什么优势呢？

假设我们有一个性能开销比较大的计算属性 list，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 list。如果没有缓存，我们将不可避免的多次执行 list 的 getter！

总结：

• computed 计算属性 : 依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值。

• watch 侦听器 : 更多的是观察的作用，无缓存性，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。 运用场景：

• 当需要进行数值计算,并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时都要重新计算。

• 当需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许执行异步操作 ( 访问一个 API )，限制执行该操作的频率，并在得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

8. Computed 和 Methods 的区别

可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式是相同的

不同点：

• computed: 计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值；
• method 调用总会执行该函数。

9、data为什么是函数

解释1： 1、 因为内部会调用Vue.extend会将组件的定义传入，此时会将用户的参数进行合并检测data属性，如果data不是函数会报警告。 会将当前定义的data合并到组件的内部，如果data是一个对象就存在数据被共享的可能

解释2：

• vue中组件是用来复用的，为了防止data复用，将其定义为函数。
• vue组件中的data数据都应该是相互隔离，互不影响的，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响，就需要通过data函数返回一个对象作为组件的状态。