vue面试题
data 为什么是一个函数
组件的data写成一个函数，数据以函数返回值形式定义，这样每次复用组件，都会返回一个新的data，让各个组件实例维护各自的数据，如果写成对象形式，则会所有组件共用一个data；
vue生命周期
beforeCreate created beforeMount mounted beforeUpdate update beforeDestroy destroyed
computed和watched的区别
computed 是计算属性，具有缓存性，在依赖的值改变后会触发，是基于响应式依赖进行缓存的，也就是基于data中定义的或是props接收到的值计算的，不支持异步；
watched 是属性监听器，不支持缓存，支持异步，监听数据必须是data中定义的或是props接收到的数据
vue2.0响应式原理
数据劫持 + 观察者模式：实现一个劫持器监听所有属性，如果有变动就通知订阅者，实现一个订阅者，收到属性的变化通知并执行响应的函数，同时更新视图
使用Object.defineProperty()方法去劫持监听对象，只能监听到已有的属性，且不能监听数组的变化；
3.0 使用ES6的Proxy 监听整个对象，可以监听到所有属性，包括新增的，也可以监听数组的变化；
v-for为什么要加key
标识组件的唯一性，使用diff算法更准确，更快速的更新节点
vue中使用哪些设计模式
工厂模式：传入参数即可创建实例，虚拟DOM根据参数的不同返回基础标签的VNode和组件的VNode
单例模式：整个项目有且仅有一个实例，vuex和vue-router的插件注册方法 install 判断如果系统存在实例就直接return返回掉
发布-订阅模式
观察者模式
装饰器模式
策略模式
性能优化
对象层级不要过深，否则性能会差
不需要响应式的数据，不要直接放在data里，可以放在Object.freeze()里冻结数据
v-if 和v-show区分使用场景
computed和watched区分场景使用
v-for必须加key,最好是id值，且不要同时使用v-if
防止内部泄露，组件销毁后把全局变量和时间销毁
图片懒加载
路由懒加载
异步路由
第三方插件的按需加载
适当使用keep-alive缓存组件
防抖、节流的运用
服务端渲染SSR 或 预渲染
nextTick原理和使用场景
nextTick 的回调是在下次DOM更新循环结束之后执行的延迟回调。在更新数据后，立即使用这个方法，可以获取到更新之后的DOM。主要思路是采用微任务优先的方式调用异步方法去执行nextTick包装的方法
mixin 原理和使用场景
组件和组件之间有相似的部分，并且相对独立，可以使用mixin抽取出来。原理是调用mergeOptions方法进行合并，采用策略模式针对不同的属性进行合并。
keep-alive使用场景和原理
可以实现组件缓存，当组件切换时不会对当前组件卸载
常用的两个属性include / exclude，允许组件有条件的进行缓存
两个生命周期activated / deactivated 来判断当前组件是否处于活跃状态
使用LRU算法，选择最近最久未使用的组件进行淘汰，（新加入的或操作的数据往尾部放，满的时候删除头部的）
宏任务和微任务
宏任务是宿主(浏览器、Node)发起的，微任务是JS自身发起的；
微任务先于宏任务执行
路由模式
hash，修改路由，页面不刷新，地址中有#
history，方法有：go back forward，pushState,replaceState，需要后端的配置
diff算法
对比tag标签：不一致，直接替换
tag标签一致：先替换属性，再对比子元素，如果新老都有子元素，则使用双指针方式进行对比，如果新有老没有，直接把新的子元素插入到老的子元素中，如果新没有老有，把子元素清空；
无tag标签，文本节点直接比较内容是否一致
虚拟DOM
用一个原生的JS对象去描述一个DOM结构，是对真实DOM的一层抽象；
优点：保证性能下限，无需手动操作DOM，跨平台
缺点：首次渲染大量DOM时，由于多了一层DOM计算，会比innerHTML插入慢；无法进行极致优化
