2025前端面试题
vue
vue2的响应式原理
Vue2通过Object.defineProperty对data中的属性进行劫持，当属性值发生变化时，会触发对应的更新函数，从而更新视图。
Vue2通过Watcher来实现数据与视图的双向绑定，当数据发生变化时，Watcher会通知对应的视图进行更新。
·Vue2的响应式原理存在一些缺陷，例如无法监听数组的变化，需要通过特殊的方法来实现
vue3的响应式原理
Vue3使用Proxy代替了Object.defineProperty，Proxy可以监听到对象的所有属性，包括新增和删除操作。
Vue3使用了WeakMap来存储依赖关系，避免了Vue2中Watcher的内存泄漏问题
Vue3支持了多个根节点的组件，可以更方便地进行组件的复用和组合。
vue3和2的区别
更快的渲染速度：Vue3使用了Proxy代理对象，可以更快地跟踪数据变化，从而提高渲染速度。
更小的体积：Vue3的体积比Vue2更小，同时也支持按需加载，减少了页面加载时间。
更好的TypeScript支持：Vue3对TypeScript的支持更加完善，可以更好地进行类型检查和代码提示。
更好的组件封装：Vue3引入了Composition API，可以更好地封装组件逻辑，使得组件更加可复用和易维护。
响应式系统进行了重构，可以更好地处理嵌套对象和数组的变化，同时也提供了更多的API来处理响应式数据。
Vuex中的重要核心属性有哪些？
Vuex 应用的核心就是 store（仓库）
五大核心：State,Getter,Mutation,Action,Module
state 存放数据
Getter 相当于计算属性
Mutation 同步修改state中的数据
actions 异步修改数据 调用Mutations中的方法
Module 数据过多或复杂时，将数据用模块化分开
Vue-router有哪几种路由守卫
分四种
全局导航守卫 beforeEach,afterEach
路由独享守卫 beforeEnter
组件内的守卫 beforeRouteEnter beforeRouteUpdate beforeRouteLeave
全局解析守卫 beforeResolve
es6
ES6的新特性
let const {}[] unicode map set symbol … proxy promise class model
块级作用域 let 和const
箭头函数 （）=> {} 简洁 无this
Promise 异步编程
class类和extends继承
模板字符串 使用反引号` 定义字符串，可以嵌入表达式${}
解构赋值：从数组和对象中提取值并赋给变量
默认的参数：函数赋值可以设置默认的参数
扩展运算符：…
模块化：使用 import 和 export 语法导入和导出模块
符号（Symbol）：新的数据类型，表示唯一的标识
set 数组元素是唯一，不重复
map 对象，键值对
Promise
ES6引入的异步编程的解决方案，
从语法上说，Promise是一个构造函数，可以实例化对象。封装异步操作，获取成功和失败的结果。
优点：支持链式调用，可以解决回调地狱的问题
缺点：无法取消Promise，一旦新建他就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误无法反应到外部。当pending的时候，无法知道进展到了哪一步。
三种状态：pending（进行中）、fullfilled（已成功）、rejected（已失败）。
主要应用在文件读取操作、 数据库操作、AJAX网络请求、定时器
async/await
像写同步代码那样编写异步代码
async 函数返回一个 Promise对象，可以使用 then方法添加回调函数。当函数执行的时候，一旦遇到 await 就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。
安全
跨域CORS
原因：受同源策略的限制，web浏览器若两个页面的协议、域名、端口三者中任意一个不同，就会产生跨域
解决：
CORS（Cross-Origin Resource Sharing）：现代浏览器支持CORS，服务器可以在响应头中设置Access-Control-Allow-Origin来允许或拒绝跨域请求
本地做proxy代理 vue-cli代理跨域：使用devServer进行代理
Jsonp 通过