4. vue
- 单例模式：-单例模式就是整个程序有且仅有一个实例Vuex中的store
- 工厂模式：-传入参数即可创建实例（createElement）
- 发布订阅模式：－订阅者把自己想订阅的事件注册到调度中心，当该事件触发时候，发布者发布该事件到调度中心，由调度中心统一调度订阅者注册到调度中心的处理代码。
- 观察者模式：-watcher&dep的关系
- 代理模式：－代理模式给某一个对象提供一个代理对象，并由代理对象控制对原对象的引用。
- 装饰器模式：-Vue2装饰器的用法（对功能进行增强@）
- 中介者模式：－中介者是一个行为设计模式通过提供一个统一的接口让系统的不同部分进行通信。Vuex
- 策略模式：－策略模式指对象有某个行为,但是在不同的场景中,该行为有不同的实现方案。mergeOptions
- 外观模式：－提供了统一的接口，用来访问子系统中的一群接口。
vue中的性能优化
- 数据层级不宜过深，合理设置响应式数据
- 通过Object.freeze()方法冻结属性
- 使用数据时缓存值的结果，不频繁取值。
- 合理设置Key属性
- v-show和v-if的选取
- 控制组件粒度->Vue采用组件级更新
- 采用函数式组件->函数式组件开销低
- 采用异步组件->借助webpack分包的能力
- 使用keep-alive缓存组件v-once
- 分页、虚拟滚动、时间分片等策略..
单页应用首屏加载速度慢的解决方法
- 使用路由懒加载、异步组件，实现组件拆分，减少入口文件体积大小(优化体验骨架屏)
- 抽离公共代码，采用splitchunks进行代码分割。
- 组件加载采用按需加载的方式。
- 静态资源缓存，采用HTTP 缓存（强制缓存、对比缓存）、使用localStorage实现缓存资源。
- 图片资源的压缩，雪碧图、对小图片进行base64 减少http 请求。
- 打包时开启gzip压缩处理compression-webpack-plugin插件
- 静态资源采用CDN提速。终极的手段
- 使用SSR对首屏做服务端染。
跨域的解决方案
跨域是浏览器同源策略导致的，这个是浏览器的行为（协议、主机名、端口的不同都会导致跨域问题）。服 务端和服务端之间进行通信是没有跨域问题的。跨域的实现方案有很多种。不过一般常用的就那么几种。
- CORS（Cross-Origin Resource Sharing，跨域资源共享）由服务端设置，允许指定的客户端访问服务器。
- 构建工具中设置反向代理、使用Nginx做反向代理。
- 使用Websocket进行通信。
- 搭建BFF(Backend For Frontend）层解决跨域问题。
封装axios
- 设置请求超时时间。
- 根据项目环境设置请求路径。
- 设置请求拦截，自动添加Token。
- 设置响应拦截，对响应的状态码或者数据进行格式化。
- 增添请求队列，实现loading效果。
- 维护取消请求token，在页面切换时通过导航守卫可以取消上个页面中正在发送的请求。
权限管理
- 登录鉴权：用户登录后返回Token，前端将Token保存到本地，作为用户登录的凭证，每次发送请求时会携带Token，后端会对Token进行验证。当页面刷新时我们可以使用Token来获得用户权限。
- 访问权限：根据用户是否登录判断能否访问某个页面，通过路由守卫实现判断用户是否有此权限。
- 页面权限：前端配置的路由分为两部分“通用路由配置”和“需要权限的路由配置”。在权限路由中增加访问权限meta（备注）。用户登录后可得到对应的权限列表，通过权限列表筛查出对应符合的路由信息，最后通过addRoutes方法，动态添加路由。
- 按钮权限：按钮权限一般采用自定义指令实现，当用户登录时后端会返回对应的按钮权限，在按钮上使用此指令，指令内部会判断用户是否有此按钮权限，如果没有则会移除按钮。
vue-router几种模式
Vue-Router 有三种模式 hash、history、abstract
- abstract 模式是在不支持浏览器APl环境使用，不依赖于浏览器历史
- hash 模式：hash +popState/hashchange 兼容性好但是不够美观，hash 服务端无法获取。不利于 seo优化
- history 模式: historyApi+ popState 美观，刷新会出现 404 -> CLl webpack history-fallback
vuex原理
对于Vuex3核心就是通过newVue(创建了一个Vue实例，进行数据共享。 对于Vuex4核心就是通过创建一个响应式对象进行数据共享reactive）
vue3的组合式api的优势
- 在Vue2中采用的是OptionsAPl,用户提供的data,props,methods,computed,watch等属性（用户编写复杂业务逻辑会出现反复横跳问题）
- Vue2中所有的属性都是通过this访问，this存在指向明确问题，
- Vue2中很多未使用方法或属性依l旧会被打包，并且所有全局API都在Vue对象上公开。CompositionAPI对tree-shaking更加友好，代码也更容易压缩。
- 组件逻辑共享问题，Vue2采用mixins实现组件之间的逻辑共享；但是会有数据来源不明确，命名冲突等问题。Vue3采用CompositionAPI提取公共逻辑非常方便
- 简单的组件仍然可以采用OptionsAPI进行编写，compositionAPI在复杂的逻辑中有着明显的优势~。
vue2和vue3的区别
- Vue3.0更注重模块上的拆分，在2.0中无法单独使用部分模块。需要引入完整的Vuejs（例如只想使用使用响应式部分，但是需要引入完整的Vuejs)，Vue3中的模块之间耦合度低，模块可以独立使用。拆分模块
- Vue2中很多方法挂载到了实例中导致没有使用也会被打包（还有很多组件也是一样）。通过构建工具Tree-shaking机制实现按需引入，减少用户打包后体积。重写API
- Vue3允许自定义渲染器，扩展能力强。不会发生以前的事情，改写Vue源码改造渲染方式。扩展更方便
- 在Vue2的时候使用defineProperty来进行数据的劫持，需要对属性进行重写添加getter及setter性能差。当新增属性和删除属性时无法监控变化。需要通过
$set、$delete实现 - 数组不采用defineProperty来进行劫持（浪费性能，对所有索引进行劫持会造成性能浪费）需要对数组单独进行处理
- Diff算法也进行了重写。
- Vue3模板编译优化，采用PatchFlags优化动态节点，采用BlockTree进行靶向更新等
- 声明周期：beforecreate更改为setup，destoryed和beforedestory更改为onUnMounted和onBeforeUnMounted
- vue2选项式api，所有属性都需要写在同一个vue实例中，单一状态树，vue3组合式api，所有属性都是使用方法区分，支持多根节点可读性更高
- vue2中需要在data中定义数据，vue3使用ref定义响应式数据
API变化
- Composition API：Vue3引入，替代Vue2的Options API，提高代码组织和复用性。
- 生命周期钩子：Vue3更新生命周期钩子名称，如
beforeCreate改为setup。
性能提升
- Vue3使用
Proxy代替Object.defineProperty，性能更高，支持更多特性。 - v-if和v-for可以写在同一标签中且v-if先执行
- Vue3优化虚拟DOM算法，减少渲染时间。
其他改进
- Fragment支持：Vue3允许组件返回多个根节点，提高灵活性。
- TypeScript支持：Vue3对TypeScript提供更好的支持。
虚拟DOM的运行机制
- 创建虚拟DOM：根据模板或状态生成虚拟DOM树。
- 对比新旧虚拟DOM：使用Diff算法比较新旧虚拟DOM，找出差异。
- 更新真实DOM：根据差异，最小化操作真实DOM，只更新需要变化的部分。
优点
- 提高性能：减少直接操作真实DOM的次数，提升渲染效率。
- 跨平台：虚拟DOM可以映射到不同平台，实现跨平台开发。
MVVM
Model-View-ViewModel
- View是视图层，用户界面
- Model是指数据模型，后端进行数据操作和业务逻辑处理
- ViewModel由前端开发人员组织生成和维护的视图数据层
优点
- 低耦合、可复用
- 分层开发
- 测试方便
vue3中为什么去掉了vue构造函数
vue2的全局构造函数带来了诸多问题：
- 调用构造函数的静态方法会对所有vue应用生效，不利于隔离不同应用
- ue2的构造函数集成了太多功能，不利于tree shaking，vue3把这些功能使用普通函数导出，能够充分利用tree shaking优化打包体积
- vue2没有把组件实例和vue应用两个概念区分开，在vue2中，通过newVue创建的对象，既是一个vue应用，同时又是 一个特殊的vue组件。vue3中，把两个概念区别开来，通过createApp创建的对象，是一个vue应用，它内部提供的方法是针对整个应用的，而不再是一个特殊的组件。
贡献者
pinkdopeybug版权所有
版权归属：
