vue相关
简述一下vuex
vuex 是一个状态管理工具，主要解决大中型复杂项目的数据共享
state：定义公共数据并在组件中使用，vuex的基本数据,用来存储变量。
getter：在state中的数据基础上，进一步对数据进行加工得到的新数据
mutation：提交更新数据的方法,必须是同步的(异步使用action)，修改定义在state中的公共数据。
action：发异步请求，和mutation的功能大致相同,不同之处在于:
Action 可以通过调用 mutation来修改state，而不是直接变更状态
Action 可以包含任意异步操作。
modules：拆分复杂业务，模块化,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,管理更为方便。
使用下面这两种方法存储数据：
dispatch：异步操作，this.$store.dispatch(‘mutations方法名’,值)
commit：同步操作，this.$store.commit(‘mutations方法名’,值)
简述一下vue中的$nextTick
nextTick的核心就是利用了Promise、MutationObserver、setlmmediate、setTimeout的原生JavaScript方法来实现，本质是为了利用JavaScript的这些异步回调任务队列来实现vue框架中自己的异步回调队列。 vue 中的 nextTick 主要用于处理数据动态变化后，DOM 还未及时更新的问题，用 nextTick 就可以获取数据更新后最新 DOM 的变化
关于插槽的理解
插槽分为：匿名插槽、具名插槽、作用域插槽
1. 匿名和具名插槽比较简单就相当于,子组件在调用的时候,标签中间可以传入dom结构.子组件内部.通过slot标签作为dom结构展示的占位符.
2. 如果它上面有name属性.而父组件里面的dom结构通过#名字方式传入,就成了具名插槽.否则都显示在一个slot标签上就是匿名了;
3. 作用域插槽,稍微麻烦一些:它实际上.就是可以在子组件里面给slot传递数据.父组件中.可以通过v-slot#name=”scope”的方式,接收到传递过来的所有的数据.然后进行组装结构.再传递到子组件里面去展示
性能优化
vite和webpack的区别有哪些?为什么vite速度会快一些
在使用的过程中,开发环境中,编译要快很多,即使随着模块的增多,也很快.首先vite底层是用go语言编写的.基于ESmodel方式加载模块.webpack是利用js实现的打包构建,go语言本身在速度上就比js要快;
Webpack是要先分析依赖.全部打包.然再启动开发服务器.就会慢很多. 但是vite开始不会打包.直接启动开发服务器.是浏览器请求的时候.基于ESmodel按需编译对应的模块.当浏览器请求某个模块时，再根据需要对模块内容进行编译,缩短了编译时间,效率就提升。 修改文件热更新时 当改动了一个模块后，仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的相关依赖模块全部编译一次.
你在项目中/vite中做过哪些配置/性能优化
比方说里面跨域的配置;配置了proxy代理.有一个target指向了跨域地址,把这个变量根据后端swigger给的接口文档进行配置解决的跨域
(跨域是浏览器出于安全考虑根据同源策略.做出的限制,也就是端口域名协议,都需要一样,这个代理相当于启动了一个代理服务器.我浏览器请求本地的代理服务器,代理服务器转发请求.目标服务器(服务器和服务器之间获取数据,不受到同源策略的限制),获取数据之后,返回给浏览器,这里只能解决开发环境下跨域,生产环境在nginx里面做配置,具体配置忘了,需要现查);
另外你像开启GZIP压缩.安装了一个插件.把js css等进行压缩成GZIP格式.这样在访问的时候,就能够进一步减小资源包的体积,提升传输效率.当然这里需要后端的配合修改nginx配置.
(浏览器请求头里面有个accept-encoding.是告诉服务端.我支持哪种编码格式,服务端在响应头里面返回content-encoding:gzip,告诉浏览器对应编码格式进行解码)
开启CDN缓存,也是引用一个插件,走CDN缓存,减少服务器的带宽和压力
开启图片的压缩.也是用了一个插件,减小图片体积
减少map文件生成
减少console.log输出
使用懒加载在一个比较长的网页或者页面中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的数据，这样就浪费了性能。
如果使用图片懒加载的方式就可以很好地解决以上的问题。在滚动屏幕之前，可视化区域外的数据不进行加载 ，在滚动屏幕的时候采取进行加载。这样使网页的加载速度更快，减少了服务器的负载。懒加载适用于图片较多，页面列表较长的场景。
