史上最全前端vue面试题

为什么会形成跨域？
不是一个源的文件操作另一个源的文件就会形成跨域。当请求端的协议、域名、端口号和服务器的协议、域名、端口号有一个不一致就会发生跨域。
解决方法：安装插件
Pip install django-cors-headers
vuex的工作流程？
① 在vue组件里面，通过dispatch来出发actions提交修改数据的操作。
② 然后再通过actions的commit来出发mutations来修改数据。
③ mutations接收到commit的请求，就会自动通过Mutate来修改state（数据中心里面的数据状态）里面的数据。
④ 最后由store触发每一个调用它的组件更新。
vuex是什么？怎么使用？
vuex是一个专为vue.js应用程序开发的状态管理模式。
使用:store,getters,mutations,actions,modules
详细使用写法请见：https://blog.csdn.net/qq_33226029/article/details/109628600?spm=1001.2014.3001.5502
vuex中的数据在页面刷新后数据消失怎么解决？
使用sessionStorage或localStorage存储数据;
也可以引入vuex-persist插件
在vue中，如何阻止事件冒泡和默认行为？
在绑定事件时，在指令后边加上修饰符.stop来阻止冒泡，.prevent来阻止默认行为
深拷贝与浅拷贝？
假设B复制A，修改A的时候，看B是否变化：
B变了是浅拷贝（修改堆内存中的同一个值），没变是深拷贝（修改堆内存中不同的值）。
浅拷贝只是增加了一个指针指向已存在的内存地址，
深拷贝是增加了一个指针并申请了一个新的内存，使这个增加的指针指向这个新的内存。
深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体，而不是引用。
vue的生命周期？
beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed
actived deactived （keep-alive）组件是否激活调用
keep-alive: 组件缓存
https://juejin.cn/post/6844903624099758094
```
<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
```
router.js中:
meta: {keepAlive:true} // 需要被缓存
钩子执行顺序：created -> mounted -> actived
include表示需要缓存的页面；exclude表示不需要缓存的页面。如果两个同时设置，exclude优先级更改，则组件不会被缓存。
应用场景： 用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回该列表页，我们希望列表页可以保留用户的筛选状态。
vue传值方式？
props $emit() $on() $parent $children $listener $attr

$on 兄弟组件传值

var event = new Vue(); // 定义一个空的vue实例
a组件：event.$emit('data-b', this.age);
b组件：event.$on('data-b', age=>{
    this.age = age;
})

$emit 分发
$on 监听
$off 取消监听
$once 一次性监听一个事件
在js文件中定义一个中央事件总线Bus，并暴露出来
具体的实现方式：

在utils下新建eventBus.js

// eventBus.js
import Vue from 'vue';
export default new Vue();

在需要使用的组件中引入

import Bus from '@/untils/eventBus.js';
// 方法触发
handleBus(){
    Bus.$emit('tryBus');
}

// 方法定义及实现
Bus.$on('tryBus', ()=>{
    console.log('点着我了');
});

// 若不是全局使用，记得清除方法
beforeDestroy(){
    Bus.$off('tryBus');
}

使用Bus的时候在接收Bus的组件的beforeDestroy函数中销毁Bus，否则会一直叠加调用这个方法。
应用场景：“退出登录” -> ①点击退出登录；②修改密码后自动退出登录

组件跨级传值
$attrs a->b->c
$listeners 监听

// a
<parent :toCVal="val" @fromSon="chgVal"></parent>

// b
<child v-bind="$attrs" v-on="$listeners"></child>

// c
props:['toCVal'],
this.$emit('fromSon');

vue事件修饰符有哪些？
.stop .prevent .self .once .passive .sync
箭头函数中的this？
不具有this绑定，但函数体可以使用this，这个this指向的是箭头函数当前所处的词法环境中的this对象。
vue中watch与computed使用及区别？
computed:
支持缓存。只有依赖数据变化才会重新计算；
不支持异步，无法监听数据变化；
会默认走缓存，是基于响应式依赖进行缓存的，及通过data声明过或props数据计算得到；
属性值为函数，默认走get方法；数据变化走set方法。
watch:
监听器，不支持缓存，数据变化直接出发；
支持异步；
接收两个参数，新值与旧值；
监听数据必须是data中声明过或父组件传递props中的数据。
为什么vue组件中data必须是一个函数？
如果不是函数的话，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了，当他是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，就不会互相影响。
v-if 和 v-show区别？
v-if 是对标签的创建与销毁， v-show 则仅在初始化时加载一次，v-if 开销相对来说比v-show 大；
v-if 是惰性的；v-show 做的仅是简单的css切换。
v-text 与 v-html区别？
v-text 用于普通文本，不能解析html；
v-html 反之。
v-for key的作用？
使用v-for更新渲染过的数据，它默认用“就地复用”策略。如果数据项的顺序改变，vue将不是移动DOM元素来匹配数据项的改变，而是简单地复用此处每个元素，并确保在特定索引下显示已被渲染过的每个元素。key属性类型只能是string或number。
key的特殊属性主要用在虚拟DOM算法，在新旧node对比时辨识VNods。如不使用key，vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法，它会基于key的变化重新排列元素顺序。
Scss是什么？在vue-cli中安装步骤？有哪几大特性？
npm 下载loader （sass-loader,css-loader,node-sass）,在webpack中配置extends属性（加.scss拓展） Vscode中可在扩展中下载;
特性：可以用变量，可以用混合器，可以嵌套等。
vue获取dom？
ref
vue初始化页面闪动问题？
webpack、vue-router
v-cloak css:[v-cloak]:display:none
什么是vue-router？
vue router 是官方路由管理器。
主要功能：路由嵌套，模块化基于组件路由配置，路由参数、查询、通配符，细粒度导航控制，自定义的滚动条行为等。
vue路由传参，接收？
传： this.$router.push({path:'', query(params):{}})
接：this.$router.query.xxx
防抖和节流？
节流是一定时间内执行一次函数，多用在scroll事件上；
防抖是在一定时间内执行最后一次的函数，多用在input输入操作，表单提交等。
如何让scss只在当前组件中起作用？
<style scoped>
vue observable？
类似vuex数据共享

解构赋值

// 交换两个变量的值
var val1 = 5;
var val2 = 10;

// 常规 创建临时变量temp
var temp = val1;
tal1 = tal2;
tal2 = temp;

// 运用解构赋值
[val1, val2] = [val2, val1];

路由push、replace区别

this.$router.push('home'); // 跳转到home页会向history添加新记录
this.$router.replace('home'); // 一般使用replace来做404页面，不会向history添加新记录

Array.from() 用于将两类对象转为真正的数组
```
let obj=[{id:5, a:7}]
Array.from(obj)
```
Array.of() 用于将一组值转换为数组
```
Array.of(1,2,3) // [1,2,3]
```

数组实例的 find() 和 findIndex()

[1,2,-5,10].find(n => n<0) // -5
[1,5,10,15].findIndex((val, i, arr) => {
  return val>9
}) // 2

数组实例 fill()

[1,2,3].fill(7) // [7, 7, 7]
['a','b','c'].fill(7,1,2) // ["a", 7, "c"]

数组实例 includes()
此方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes()类似
```
[1,2,3].includes(2) // true
[1,2,3].includes(4) // false
[1,2,3].includes(3,2) // true
```
string.includes(searchvalue, start)
searchvalue 必需，要查找的字符串。
start 可选，设置从那个位置开始查找，默认为 0。

数组去重方法

var arr = ['1','2','3','4','4','6','2'];
const newL = [];
for(const o of arr) {
    if (newL.find(c=>c=== o)) {
        continue;
    }
    newL.push(o);
}

(1) Set

let el = new Set(arr)

(2) indexOf

let el1=[];
arr.forEach(item => {
    if(el1.indexOf(item) === -1){
        el1.push(item)
    }
})

(3) filter

 let arr2 = arr.filter((x, index,self) => {
    return self.indexOf(x)===index;
 });

字符串数组转为数字数组

['1','2','3'].map(Number) //  [1, 2, 3]

for...in 返回键列表
for...of 数值属性的值列表
更详细的解释请见：https://blog.csdn.net/qq_33226029/article/details/111179890?spm=1001.2014.3001.5502
闭包
常常用来「间接访问一个变量」。换句话说，「隐藏一个变量」，JS 的函数内部可以使用函数外部的变量。
定义在函数内部的函数;
匿名函数创建闭包；
将函数内部和函数外部连接起来的一座桥梁。内层函数可以使用外层函数的所有变量，即使外层函数已执行完毕，闭包函数可以用来模仿作用域等。
应用场景：setTimeOut
setTimeOut传递的第一个函数不能带参数，即
```
setTimeout(func(param),1000)
function func(param){
  return function(){
    alert(1)
  }
}
var f = func(1)
setTimeout(f,1000)
```
内存泄露
内存泄露是指你用不到（访问不到）的变量，依然占居着内存空间，不能被再次利用起来。
Map类型也称为 简单映射
作用：保存一组键值对儿用普通对象保存键值对儿会导致键容易与原生属性混淆，简单映射能做到键和值与对象属性分离，从而保证对象属性的安全存储。
```
var map = new Map();
map.set('name','pp');
map.set('book','js');
console.log(map.has('name')); // true
console.log(map.get('name')); // "pp"
map.delete('name');
```
与简单映射相关的是Set类型。集合就是一组不重复的元素。集合中只有键，没有与键关联的值。
在集合中添加元素用add()方法，
检查元素是否存在要使用has()方法，
删除元素delete()方法。
```
var set = new Set();
set.add('name');
console.log(set.has('name')); // true
set.delete('name');
console.log(set.has('name')); // false
```
转JSON对象 JSON.parse()
转成字符串 JSON.stringify()

Object.assign() 对象合并

const target = {a:1, b:2};
const source = {b:4, c:5};
const returnTarget = Object.assign(target, source);
console.log(returnTarget); // {a: 1, b: 4, c: 5}

Router-link: 封装a标签
Router-view:视图渲染路由
css隔离方案
- BEM(Block Element Modifier) 约定前端前缀
- CSS-Modules 打包时生成不冲突的选择器名
- Shawdow DOM
- css-in-js
less 和 sass有什么区别？
less：用@定义变量
scss：用$定义变量；可以判断语句 if else 可以循环 for
const 为什么能改变对象和数组？
const仅保证指针不发生改变，修改对象属性不会改变对象的指针，所以是被允许的。
引用类型：引用地址，保存的只是要给只想实际数据的指针。
基本类型：地址固定，值就草存在变量指向的那个内存地址。
const用来定义常量，且定义的时候必须初始化，且定义后不能改变。
v-deep
如果不使用scoped属性改公共组件的样式会被污染到全局,但设置scoped属性的话，直接覆盖样式会不生效。
vue组件中使用第三方组件库，需要在这个组件中定制样式又不想影响其他地方使用此第三方组件的样式。
用deep选择器，可以穿透scoped但又不会污染全局样式。
```
 // scss /deep/会发生警告
::v-deep.el-btn-small{}

// css
.a>>> .b{}
```

别走，还有后续呐······
本文只是我个人的知识点整理，日后还会不断的进行补充，工作中遇到的知识点如果不及时记录过后很有可能会被遗忘。如果小伙伴们还能想到其他vue前端面试题，欢迎在评论区留言，分享是种美德，谢谢你的贡献。

PS：写作不易，如要转裁，请标明转载出处。