1.VUE的声明周期有哪些及每个生命周期做了什么
beforeCreate: 是new Vue() 之后触发的第一个钩子，data,methods,computed 以及watch 上的数据和方法都不能被访问
created: 在实例创建完成后发生，可以做一些初始化数据的获取，在当前阶段无法与Dom 进行交互，如果非要可以通过vm.nextTick 来访问。
beforeMounted: 发生在挂载之前，template模版导入渲染函数编译，虚拟Dom已经创建完成，即将开始渲染
mounted:在挂载完成后发生，在当前阶段，真实的Dom 挂载完毕，数据完成双向绑定，可以访问到Dom 节点，使用ref属性对Dom 进行操作。
beforeUpdate: 发生在更新之前，也就是响应数据发生更新，虚拟Dom 重新渲染之前被触发，可以在当前阶段进行更改数据，不会造成重新渲染。
updated: 发生在更新完成之后，组件Dom 已完成更新，避免在此期间更改数据，可能会导致数据的万县循环更新。
beforeDestroy : 发生在实例销毁之前，在当前阶段实例完全可以被使用，在这个阶段可以完成善后工作，比如清除定时器。
destroyed: 发生在销毁之后，这个阶段只剩下Dom空壳，组件已经被拆解，数据绑定陪卸除，监听被移除，子实例被销毁。
2.vue 响应式原理是什么？ Vue3 响应式有什么不同
vue 在初始化的时候会使用Object.defineProperty 重新定义data中的所有属性，当页面调用对应的属性的时候，会进行依赖收集
如果属性发生变化会通知相关的依赖进行更新操作(发布订阅)。
Vue3.x 改用Proxy 替代Object.definedProperty,Proxy 可以直接监听对象和数组的变化。
3.vue3和vue2的别去
源码组织方式变化：使用TS 重新。
支持Composition API 基于函数的API 更加灵活组织组件逻辑。
响应式系统提升:Vue3 采用的是proxy,可动态新增删除属性，及数据变化
编译优化：vue2通过标记静态跟节点优化diff,vue3标记和提升所有静态根节点，diff 的时候只需对比动态节点内容。
打包体积的优化：移除了一些不常用的api,例如：filter
生命周期的优化：使用setup代替了之前的beforeCreate和created
vue3的template 标签支持多个根标签。
vuex 状态 管理：创建实例的方式不同，vue2为new Store,vue3为createStore
Route 获取页面实例与路由信息：vue2 通过this 获取router 获取 实例，vue3 通过使用getCurrentInstance/userRoute和userRouter获取当前组件实例
Props 的变化；vue2 通过this 获取props 里面的内容，vue3直接通过props
4.对MVVM 的理解
就是把MVC 中的Controller 演变成了ViewModel ,Model 层代表数据模型，View代表UI组件，viewModel 是view和model 层的桥梁
数据会绑定到viewModel 并自动渲染到页面中，视图的变化时会通知viewModel 层更新数据。
5.v-model 双向绑定的原理是什么
v-model 本质是一个语法糖，可以看成是value+input 方法的语法糖，可以通过model 属性的prop 和envent 属性进行自定义，原生的
标签会根据生成不同的事件和属性。
6.vue2.x和vue3.x 渲染的diff 算法
diff 算法有以下过程
同级比较，在比较子节点
先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点，将就的子节点移除)比较都有子几点的情况
递归比较子节点
vue2 的核心Diff 算法采用了双端比较算法。
vue3 借鉴了 ivi 算法和inferno 算法。
7.vue 组件通讯方式有哪些及原理
父子组件通信，
父->子 props 子->父 on,emit 获取父子组件的实例parent,children
Ref 获取实例的方式调用组件的属性或者方法。
Provide,inject 依赖注入的形式，兄弟组件的方式 Bus 跨级组件通信 Vuex
8.hash 路由和history 路由
location.hash 的值实际上就是 # 后面的
history 实际上是采用了HTML5中提供的api 来实现的 主要有history.pushState() 和history.replaceState()
9.keep-alive 的常用属性有哪些
keep-alive 可以实现组件缓存 ，当组件切换时不会对当前组件进行卸载
常用的两个属性 include/exclude 允许组件有条件的进行缓存
两个声明周期 activated/deactivated 用来得知当前组件是否处于活跃状态
keep-alive 还运用了LRU 算法
10.nextTick 的作用是什么
在下次DOM 更新循环结束之后执行延迟回调，nextTick 主要是使用了宏观任务和微观任务。
定义了一个异步方法，多次调用nextTick 会将方法存入队列中，通过这个异步方法情况当前队列。
11. vue complier 的实现原理是什么
complier 的主要作用是解析模版，生成渲染模版的render,而render 的主要作用是为了生成VNode
complier 主要分为3 大块
parse: 接授template 原始模版，按着模版的节点和数据生成对应的ast
optimize: 遍历ast的每一个节点，标记静态节点，这样就知道哪部分不会变化，于是在页面需要更新时，通过diff 减少去对比DOM ，提升性能。
generate:把前两步生成完善的ast,组成render 字符串，然后将render 字符串通过new Function 的方式转换成渲染函数。
12.watch 与 computed 的区别
都是观察数据变化的
计算属性将会混入到 vue 的实例中，所需要监听自定义变量；watch 监听data,props 里面的数据的变化
computed 有缓存，他依赖的值变了才会重新计算 watch 没有。
watch 支持异步，computed 不支持；
watch 是一对多（监听某一个值变化，执行对应操作），computed 是多对一（监听属性依赖与其他属性）
watch 监听函数接收两个参数，第一个是最新值，第二个是输入之前的值。
computed 属性是函数的时，都有get和set 方法，默认走get方法 get 必须有返回值。
13.vue 修饰符有哪些
|-------|-----------------------------------------------------------------------------------------------------|
| 事件修饰符 | .stop:防止冒泡，.prevent: 防止默认事件，.capture:使用事件捕获模式，.self 只在当前元素本身触发，.once：只出一次，.passlve: 默认行为将会立即触发 |
| 按键修饰符 | .left,.right,.moddle,.enter,.tab,.delete,.esc,.space,.up,.down,.left,.right,.ctrl,.alt,.shift,.meta |
| 表单修饰符 | .lazy,.number,trim |
14.vue项目中的性能优化
|------|---------------------------------------------------------------------------------------------------------------------------------------------|
| 编码阶段 | 尽量减少data 中的数据 ，data中的数据会增加 getter 和setter ,v-if 和v-for 不能连用 spa 页面尽量采用 keep-alive 缓存组件 ，key 保证唯一，使用懒加载路由异步组件，第三方模块按需导入，长列表滚动到可视区动态加载，图片懒加载。 |
| 打包阶段 | 压缩代码，Tree Shaking/Scope Holsting 使用cdn 加载第三方模块， 多线程打包 happypack splitChunks 抽离公共文件，sourceMap 优化 |
| 用户体验 | 骨架屏 PWA |
15.vue 中的spa 应用如何优化首屏加载速度
|----------|---------------------------------------------------------------------|
| 请求优化 | 将第三方的库放到CDN 上，能够大幅度减少生产环境中的项目体积，CDN 能够实时根据网络流量和各个节点的连接，负载均衡及到用户的距离。 |
| 缓存 | 将长时间不会改变的的第三方库或者静态资源设置为强缓存，将max-age 设置为一个非常长的时间，好的缓存策略有助于减轻服务器的压力。 |
| gzip | 开启gzip 压缩，通常开始前gzip 压缩能够有效的缩小传输资源的大小 |
| http2 | 如果首屏加载的静态资源非常的多，浏览器对同域名的tcp 连接数量是有限的 chrome为6个 |
| 懒加载 | 当url 匹配到相应的路径的时候，通过import 动态加载页面组件，这样首屏的代码量会大幅度减少 |
| 预渲染 | 可以添加loading,或者骨架屏幕尽可能的减少白屏对用户的影响体验 |
| 合理使用第三方库 | 对于一些第三方ui 框架，类库，尽量使用按需加载，减少打包体积 |
| 提升代码使用率 | 利用代码分割，将脚本中无需立即调用的代码在代码构建是转变为异步加载的过程 |
| 封装 | 构建良好的项目架构，按照项目需求惊醒全局组件，插件，过滤器，指令，utils 等做一些公共封装 |
| 图片懒加载 | 使用图片懒加载可以优化同一时间减少http 请求开销 |
| 压缩图片 | 可以使用image-webpack-loader |