前端面试宝典
1 Vue生命周期总结（四个阶段，八个钩子函数）
vue生命周期分为四个阶段
第一阶段（创建阶段）：beforeCreate，created
第二阶段（挂载阶段）：beforeMount（render），mounted
第三阶段（更新阶段）：beforeUpdate，updated
第四阶段（销毁阶段）：beforeDestroy，destroyed
2 vue组件初始化的执行顺序
Props Watch 等顺序
beforeCreate ->inject -> Props -> Methods -> Data -> Computed -> Watch ->provide-> created
结合父子组件之后，一个完整的父子组件生命周期
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted->父beforeUpdate->子beforeUpdate->子updated->父updated->父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
参考：Vue——父子组件的生命周期（执行顺序）
3 Vue2和Vue3的区别
响应式原理不同（数据双向绑定原理）
vue2通过Object.definedProperty()的get()和set()来做数据劫持、结合和发布订阅者模式来实现，Object.definedProperty()会遍历每一个属性。
vue3通过proxy代理的方式实现。
proxy的优势：不需要像Object.definedProperty()的那样遍历每一个属性，有一定的性能提升proxy可以理解为在目标对象之前架设一层“拦截”，外界对该对象的访问都必须通过这一层拦截。这个拦截可以对外界的访问进行过滤和改写。
当属性过多的时候利用Object.definedProperty()要通过遍历的方式监听每一个属性。利用proxy则不需要遍历，会自动监听所有属性，有利于性能的提升
在vue2中v-for的优先级高于v-if，可以放在一起使用，但是不建议这么做，会带来性能上的浪费在vue3中v-if的优先级高于v-for，一起使用会报错。可以通过在外部添加一个标签，将v-for移到外层
参考：Vue2和Vue3的区别
4 vue2数据双向绑定原理详细介绍
详细介绍：vue数据双向绑定原理
5 Computed和Watch的区别
1、computed是计算属性；watch是监听，监听data中的数据变化。
2、computed支持缓存，当其依赖的属性的值发生变化时，计算属性会重新计算，反之，则使用缓存中的属性值；watch不支持缓存，当对应属性发生变化的时候，响应执行。
3、computed不支持异步，有异步操作时无法监听数据变化；watch支持异步操作。 4、computed第一次加载时就监听；watch默认第一次加载时不监听。
4、computed第一次加载时就监听；watch默认第一次加载时不监听。
5、computed中的函数必须调用return；watch不是。
6、使用场景：
computed：一个属性受到多个属性影响，如：购物车商品结算（多对一）。
watch：监听路由变化，一个数据影响多条数据，如：搜索数据（一对多）。
数据变化响应，执行异步操作，或高性能消耗的操作，watch为最佳选择。
详细介绍：computed和Watch的区别
6 Vuex有那几种状态和属性?
Vuex有那几种状态和属性详细介绍
7 vue路由守卫
vue路由守卫详细介绍
8 Vue项目优化方案
Vue项目优化方案详细介绍
9 es5和es6区别
1、变量声明方式不同：ES5使用var关键字进行变量声明，而ES6则引入了let和const关键字来声明变量。
2、块级作用域：在ES5中，只存在全局作用域和函数作用域，而ES6中增加了块级作用域，对于if、for、switch等代码块内部所声明的变量，在外部是不可见的。
3、箭头函数：ES6中新增了箭头函数，可以更为简洁地定义函数，同时箭头函数没有自己的this，它的this绑定在父级作用域的this上。
4、字符串模板：ES6中新增了字符串模板功能，可以使用反引号（`）来定义多行文本和嵌入表达式。
5、类和继承：ES6中引入了class关键字来实现类和继承，使得面向对象编程更加方便。
6、模块化：ES6中引入了模块化的概念，通过export和import关键字来实现模块的导出和引入。
7、解构赋值：ES6中引入了解构赋值语法，可以方便地从数组或对象中提取值并赋给变量。
8、Promise对象：ES6中引入了Promise对象，可以更加优雅地处理异步操作。
9、其他：ES6还新增了一些新的数据结构和方法，如Set、Map、Symbol等。同时对于函数参数的默认值、rest参数等也进行了增强和优化。
es5和es6区别详细介绍
10 前端跨域处理方案
一、JSONP跨域
- jsonp的缺点：只能发送get一种请求。
二、跨域资源共享（CORS）
三、Nginx 反向代理解决跨域问题
四、nodejs中间件代理跨域
五、document.domain + iframe跨域
六、location.hash + iframe跨域
七、window.name + iframe解决跨域
八、postMessage通信跨域
- postMessage：发送
- onmessage：接收
九、WebSocket协议跨域
前端跨域处理方案详细介绍