vue面试复习

1. MVC与MVVM

MVVM:由于Mvc模型在大型项目中，所有的数据和业务逻辑都堆积在controller中使得controller不可维护，j就出现了Model-View-ViewModel，即数据模型-视图-视图模型，模型指的是后端传递的数据，视图就是看到的页面，视图模型是核心，是视图和模型之间的桥梁，view和model的交互是双向的，就是我们说的双向数据绑定，开发者只需要关注业务的开发不需要关注数据状态和手动操作dom，vue就是mvvm的最佳实践，专注于做vm

MVC:即Model-View-Controller缩写，即模型-视图-控制器，我所理解的就是监听者模式，由C去监听M和V，当监听到M的数据发生变化时（查询数据），就会通知V去更新数据（更改dom操作），然后由V去改变表示（视图更新）。同时C也会监听V上发生的动作（target-action交互模式，事件），这些动作由C处理（点击事件的逻辑），当影响到M变化时（比如删除操作并重新掉接口），M反馈给C（返回新的数据），C再控制V更新表示。

2. vue双向绑定原理

1. 数据变化后更新视图
2. 视图变化后更新数据

主要包含两个主要组成部分

• 监听器Observer：对所有的数据属性进行监听
• 解析器Compiler： 对每个元素节点的指令进行扫描和解析，根据指令替换数据，绑定对应的更新函数

具体的实现原理

1. new Vue()执行初始化，对所有数据（data）通过Object.defineProperty进行响应化处理（内部通过getter和setter来实现），这个过程发生在Observer中，每个数据都有一个对应的key，并且这个key会对应一个dep实例来存储watcher数组（多个监听的地方）
2. vue的compiler对指令进行扫描和解析，找到动态绑定的数据，获取数据并初始化视图，如果遇到v-model，就监听input事件，更新data对应的数值
3. 在解析指令的过程中，会定义一个更新函数和watcher（订阅者），之后数据变数时候watcehr会调用更新函数，实例化watcher时候会读取data的key，触发getter的依赖收集，将watcher添加到订阅收集器（dep）中。
4. 一旦data中的数据发生改变时候，Observer的setter方法被触发，找到对应的dep，遍历所有的watcher并调用更新方法。对视图进行响应的更新

3. vue的核心思想

1. 数据驱动DOM变化

   上面的双向绑定原理

2. 组件化：扩展html，封装可重用的代码

   页面被拆分成一个个小的区块，每个区块对应一个组件，每个组件对应一个工程目录，组件所需要的的资源就近维护，组件间嵌套形成一个完整的页面，

4. computed与watch的区别

computed

1. 支持缓存，只有数据发生变数时候才会重新计算
2. 不支持异步，当内部有异步操作时候无法监听数据变化
3. computed默认走缓存，计算属性是基于响应式依赖进行缓存的，也就是data，props计算得到的值
4. computed中属性都有一个get和set方法，默认走get，数据变化走set

watch

1. 不支持缓存，数据变化直接触发响应操作
2. watch支持异步操作
3. 监听的函数有两个参数，一个最新值，一个之前的值
4. 写法上数组监听时候handle方法内执行操作，添加deep属性

vue中的节流和防抖

防抖：防止重复点击触发事件 n秒内只执行一次，如果再次被触发重新计算事件 设置定时器，短时间触发清除上一次定时器 节流：高频事件触发，但是n秒内只会执行一次，节流就是稀释执行频率，以第一次执行为准 （判断时间是否大于设定事件，大于之后重新执行） 通过lodash库来实现