2022个人碰到的一些vue的面试题，持续更新，_这个路由跳转query中的参数不要出现结构型的数据类型如array,map

1.路由跳转携带的query参数刷新后，数据是否还存在？

携带的query参数刷新后仍然存在，但是query的参数会拼接在url后面暴露出来，

如果携带的是params参数，刷新后会丢失，但是不会暴露在url上，相当于一个加密。

2.关于vuex的映射

export default new Vuex.Store({
  state: {
    flag:true,//表示菜单显示
    Aboutindex:0,
    userInfo:{}
  },
  getters: {//计算属性
  },
  mutations: {
    setUserinfo(state,payload){
        state.userInfo=payload
    },
    changeFlag(state,flag){
      state.flag=flag
    },
    changeAbout(state,Aboutindex){
     state.Aboutindex=Aboutindex++
    }
  },
  actions: {
  },
  modules: {
    shoppingcar,
    AddressStore
  }
})

调用方法

computed: {
     ...mapState(["userInfo"]),
    ...mapState("AddressStore", ["list", "chooseId"]),
    //vuex是单向绑定，利用计算属性将v-model=chooseId拆成单向绑定
    changeChooseId: {
      set(id) {
        this.setChooseId(id)
      },
      get() {
        return this.chooseId;
      }
    }
  },

3.vue的key有什么作用?

key是虚拟Dom对象的身份标识，当状态中的数据发生变化的时候，vue会根据新数据生成新的虚拟Dom，然后vue会对新虚拟Dom和旧虚拟Dom进行一个比较：

（1）存在一个旧Dom和新Dom的相同key：

如内容相同，则不进行更新，如不同，则生成一个新虚拟Dom，替换掉原有的旧虚拟Dom

（2）旧虚拟Dom中不存在一个相同key：

直接生成一个新虚拟Dom，然后渲染到页面

4.浅拷贝和深拷贝？

需要谈到基本数据类型和引用数据类型的存储了，基本数据类型是存储在 栈 里面的，而引用数据类型是存储在 栈 和 堆 里面的，打个比方来说就是 属性名 存在栈中，属性值 存储在堆里的，属性名类似一个 指针地址 指向 堆 中内存

浅拷贝：对基本数据类型来说，没有影响，当拷贝引用数据类型的时候，如是一个对象，新对象数据发生改变，旧对象数据也会进行相应改变，反之亦然，浅拷贝只拷贝的是一个地址。

深拷贝：深拷贝时会将被复制对象中的引用数据类型的成员变量的副本以及基本数据类型的变量的值赋值给新的对象。

5.深拷贝的三种方法：

（1）JSON.parase（JSON.stringify(obj)）

   (2)es6新增的扩展运算符：...obj（只能解构一层，多层嵌套解构不了）

   (3)递归

   (4)Array中的slice（）和concat（），object中的assign（）方法

   (如Array或object中的数据包含引用数据类型，则这些方法都是浅拷贝)

6.关于vue项目首屏优化？

（1）先对vue项目性能进行分析，安装一个webpack-bundle-analyzer插件，

npm install webpack-bundle-analyzer –save-dev

然后在vue.config.js中进行一个配置

npm run serve

运行即可查看

(2)路由懒加载（路由引入改异步即可）

（3）使用cdn引入所需要的库

（4）将资源引入方式从本地引入改为网络引入，index等文件中注销本地引入修改配置

（5）然后打包一下 npm run build  打包的dist文件夹中会产生很多map文件

.map文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。

有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。

注意：生产环境打包一般需要禁止map输出，map文件会造成项目源码泄漏

可以就行 丢弃

productionSourceMap: false,

（5）js还可以继续优化  安装插件 进行js的压缩处理 安装插件 需要指定版本 不然会有版本兼容问题

npm install --save-dev compression-webpack-plugin@5

（5.1）配置插件的使用

1. const CompressionWebpackPlugin = require('compression-webpack-plugin');

2. const productionGzipExtensions = ['js', 'css'];

plugins: [
            new CompressionWebpackPlugin({
                //[file] 会被替换成原始资源。[path] 会被替换成原始资源的路径， [query] 会被替换成查询字符串。默认值是 "[path].gz[query]"。
                filename: '[path].gz[query]', // 提示compression-webpack-plugin@3.0.0的话asset改为filename
                //可以是 function(buf, callback) 或者字符串。对于字符串来说依照 zlib 的算法(或者 zopfli 的算法)。默认值是 "gzip"。
                algorithm: 'gzip',
                //所有匹配该正则的资源都会被处理。默认值是全部资源。
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                //只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
                threshold: 10240,//超过10kb直接压缩
                //只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
                minRatio: 0.8
            }),

再次打包 ，会发现多出很多gzip文件

当请求gzip压缩版本的js时,正确配置的Web服务器将发送js.gz,因此您可以使用gzip可以提供的最高压缩级别.

（6）：利用服务器 就行 gzip的提速

在Nginx的服务器中打开 C:\Users\15871\Desktop\nginx-1.18.0\conf找到nginx.conf 进行配置

7.webpack主要有哪些属性和方法,具体说一下他们的使用

webpack.config.js配置文件中有

（1）.entry（入口文件），

从entry开始递归解析所有依赖的模块，

（2）.output（出口文件），

到output结束

（3）. module（模块打包工具）

所谓的模块就是在平时的前端开发中,用到一些静态资源,如JavaScript、CSS、图片等文件,webpack就将这些静态资源文件称之为模块 

（4）. resolve

查找需要解析模块所对应的文件

（5）devServer

使用它可以为webpack打包生成的资源文件提供web服务

主要提供两个功能：

• 为静态文件提供服务
• 自动刷新和热替换

（6） optimization

用于集中去配置webapck内部的一些优化功能。

8.vue2.0与vue3.0的区别？

1.双向数据绑定原理：

v2使用的是es5的Api Object.defineProperty对数据进行劫持，结合发布订阅者模式实现，

v3使用的是es6新出的Api Proxy 代理，使用ref或者reactive将数据转化为响应式数据。

使用Proxy的优势：

（1）definePropert只能监听某个属性，不能对整个对象进行监听

（2）可以检测到数组内部的数据变化

 2.vue3支持碎片化

也就是说，在组件内支持有多个根节点

<template>
  <div class='form-element'>
  </div>
   <h2> {{ title }} </h2>
</template>

3.数据和方法的定义

v2使用的是选项式Api，而v3使用的是组合式Api。

v2的数据和方法都是分别定义在data和methods中的，v3都是定义在setup中，并统一进行return的
4.生命周期

v2中的生命周期有beforeCreate，created，beforMount，mounted，beforeUpdate，updated，beforeDestroy，destroyed，

v3中的生命周期：onBeforeMounte，onMounted,onBeforeUpate，onUpdated,onBeforeUnmount,

onUnmounted,onErrorCaptured,onRenderTracked,onRenderTriggered,onActivated,

onDeactivated.

5.vue2中的过滤器filters，vue3中已弃用

6.实例化方法的改变：

v2通过new vue（）生成 ，v3通过createApp（）实例化

7.v-for跟v-if优先级

一般两者不建议搭配使用，因为每一次都需要重新遍历数组，会造成性能浪费，提倡用computed代替，

v2中v-for优先级比v-if高，v3中v-if优先级比v-for高

8.Vue2.x中new出的实例对象，所有的东西都在这个vue对象上，这样其实无论你用到还是没用到，都会跑一变，这样不仅提高了性能消耗，也无疑增加了用户加载时间。
而vue3.0中可以用ES module imports按需引入，如：keep-alive内置组件、v-model指令，等等，不仅我们开发起来更加的便捷，减少了内存消耗，也同时减少了用户加载时间，优化用户体验。

8.setTimeout与setInterval的区别？

两者都是经过一段时间后执行某些操作，但是setTimeout是延迟执行完一个操作后就停止，而setinterval是可以循环下去的

9.虚拟dom与真实dom之间的区别？

概念：虚拟DOM其实就是用一个原生的JS对象去描述一个DOM节点，实际上它只是对真实 DOM 的一层抽象。最终可以通过一系列操作使这棵树映射到真实环境上。

相当于在js与DOM之间做了一个缓存，利用patch（diff算法）对比新旧虚拟DOM记录到一个对象中按需更新， 最后创建真实的DOM

（1）虚拟dom体积更小。虚拟dom是通过js对象用少量的属性去描述一个dom，不能在浏览器直接显示，而真实dom也是一个对象，属性相对虚拟dom更多，在浏览器中做dom操作会更消耗性能，因为真实dom去频繁修改dom，会频繁影响后面元素的布局，引发回流和重绘，

（2）兼容性好。具备跨平台的优势–由于 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如说不同浏览器、Node 等。

（3）操作 DOM 慢，js运行效率高。我们可以将DOM对比操作放在JS层，提高效率。运用patching算法来计算出真正需要更新的节点，最大限度地减少DOM操作，从而显著提高性能。

（4）准确性。虚拟dom可以在大量、频繁的数据更新中，对视图进行合理、高效的更新

（5）不会引发回流和重绘，虚拟DOM就是为了解决浏览器性能问题而被设计出来的

10.回流和重绘？

重绘:当给一个元素更换颜色、更换背景，虽然不会影响页面布局，但是颜色或背景变了，就会重新渲染页面，这就是重绘。
回流：当增加或删除dom节点，或者给元素修改宽高、结构、显示隐藏时，会改变页面布局，那么就会重新构造dom树然后再次进行渲染，这就是回流。 回流是影响浏览器性能的关键 因素。
比如：
（1）添加或者删除可见的 DOM 元素(不可见元素不会触发回流)；
（2）元素尺寸或位置发生改变
（3）元素内容变化，比如文字数量或图片大小
（4）浏览器窗口大小发生改变
（5）CSS伪类的激活（例如：:hover，从而改变了元素的布局的）

总结：

• 重绘不会引起dom结构和页面布局的变化，只是样式的变化，有重绘不一定有回流。
• 回流则是会引起dom结构和页面布局的变化，有回流就一定有重绘。
  不管怎么说都是会影响性能。

怎么进行优化或减少？
1.多个属性尽量使用简写，例如：boder可以代替boder-width、boder-color、boder-style
2.创建多个dom节点时，使用documentfragment创建
3.避免使用table布局
4.避免设置多层内联样式，避免节点层级过多
5.避免使用css表达式
6.将频繁重绘或回流的节点设置为图层，图层能够阻止该节点的渲染行为影响到别的节点（例：will-change\video\iframe等标签），浏览器会自动将该节点变为图层