一句话就能回答的前端面试题（2024年10月最新版）
1、v-if 和 v-show 的区别
相同点: v-if 和 v-show 都可以控制dom元素的展示和隐藏
不同点：v-if 的显示隐藏是将dom元素整个添加或删除
而v-show 的隐藏是为该元素添加CSS样式 display:none,dom元素还在
一般进入页面不需要频繁显示或隐藏 就用v-if
2、data()为什么是一个函数
为了防止多个组件实例对象共用一个data，产生数据污染
3、什么是闭包
闭包就是内部函数定义一个私有变量，外部函数可以访问内部函数作用域的变量
用途：回调函数、防抖、节流、事件处理、模块化。
4、CSS3盒模型
标准盒模型 标准盒模型下盒子的大小 = content + border + padding + margin
怪异盒模型（IE盒模型） 怪异盒模型下盒子的大小 = width（content + border + padding）+ margin
5、CSS3 选择器的优先级排序
优先级排序从高到低: !important 、 行内样式 、ID选择器、 类选择器、标签选择器、全局选择器
6、rgba()和opacity的透明效果有什么不同
rgba() 和 opacity 都能实现透明效果；
不同是 opacity 作用于元素，以及元素内的所有内容的透明度，
而 rgba() 只作用于元素的颜色或其背景色。(设置 rgba 透明的元素的子元素不会继承透明效果)
7、重绘和回流
重绘：当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则称为重绘。
回流：当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流 (reflow)。
回流必将引起重绘，而重绘不一定会引起回流
8、页面置灰
body {
filter: grayscale(100%); /* 百分比或者 0~1 */
}
9、有哪些方式（CSS）可以隐藏页面元素
- opacity:0：本质上是将元素的透明度将为0，就看起来隐藏了，但是依然占据空间且可以交互
- visibility:hidden:与上一个方法类似的效果，占据空间，但是不可以交互了
- overflow:hidden:这个只隐藏元素溢出的部分，但是占据空间且不可交互
- display:none:这个是彻底隐藏了元素，元素从文档流中消失，既不占据空间也不交互，也不影响布局
- z-index:-9999:原理是将层级放到底部，这样就被覆盖了，看起来隐藏了
- transform: scale(0,0):平面变换，将元素缩放为0，但是依然占据空间，但不可交互
10、伪类和伪元素的区别
伪类：
伪类用于选择DOM树之外的信息,
例如，:hover 伪类用于选择鼠标悬停在其上的元素，:visited 用于选择已访问的链接等伪元素：
伪元素为DOM树没有定义的虚拟元素
例如，::before 和 ::after 伪元素允许在元素内容之前或之后插入内容
11、深拷贝与浅拷贝
浅拷贝 在栈内存中重新开辟一块内存空间，并将拷贝对象储存在栈内存中的数据存放到其中。
- 存在问题：浅拷贝只复制了引用，所以
修改新对象会影响到原对象
实现方法： 使用赋值运算符（=）或者Object.assign()函数进行拷贝深拷贝 会另外创造一个一模一样的对象
- 优点：
修改新对象不会影响到原对象
实现方法：递归拷贝 JSON.parse(JSON.stringify(obj)) …扩展运算符
12.原型和原型链
原型：每个对象都有一个原型 prototype，原型为当前对象提供默认的属性和方法。
原型链：实例与原型之间的链条__proto__，当访问一个对象的属性或方法时，如果该对象没有这个属性或方法，JavaScript 会沿着原型链向上查找。
原型链的终点：所有原型的原型都是Object.prototype，而Object.prototype的原型是null，null就是所有原型链的终点。
13、事件循环
JS分为同步和异步任务。同步任务在主线程上执行，一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列（可以有多个），并执行异步任务。
14、常见的异步任务有哪些？
点击和键盘等各种事件、setTimeout()、setInterval()、Promise、async/await、setImmediate()、requestAnimationFrame、网络请求…
15、任务队列
分为任务队列 (也称宏任务队列) 和微任务队列，微任务一般比宏任务先执行，并且微任务队列只有一个。
微任务：Promise回调、MutationObserver、process.nextTick（Node.js）
宏任务：setTimeout、setInterval，点击键盘等各种事件、setImmediate（Node.js）、UI渲染、script（加载并执行一个完整的
16、Promise
Promise 是代表异步操作最终完成或失败的对象。它有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。
Promise 构造函数接受一个执行器函数，该函数有两个参数：resolve 和 reject，分别用于将 Promise 标记为已完成（并传递一个值）或已失败（并传递一个原因）。
17、async/await
async/await 是建立在 Promise 之上的语法糖，它使得异步代码看起来更像同步代码。
async 函数总是返回一个 Promise。如果在 async 函数中返回一个值，那么这个值会被 Promise.resolve() 包裹并返回。如果 async 函数中抛出一个错误，那么这个错误会被 Promise.reject() 包裹并返回。
await 只能在 async 函数内部使用，它会暂停 async 函数的执行并等待 Promise 完成，然后恢复 async 函数的执行并返回解析后的值（或抛出异常）
18. new 操作符调用构造函数具体做了什么？
- 创建一个新的对象；
- 将构造函数的 this 指向这个新对象；
- 为这个对象添加属性、方法等；
- 最终返回新对象；
19、var、let 及 const 区别
函数提升优先于变量提升，函数提升会把整个函数挪到作用域顶部，变量提升只会把声明挪到作用域顶部
var 存在提升，我们能在声明之前使用。 let 、 const 因为暂时性死区的原因，不能在声明前使用
var 在全局作用域下声明变量会导致变量挂载在 window上，其他两者不会
let 和 const 作用基本一致，但是后者声明的变量不能再次赋值
20、箭头函数和普通函数的区别
箭头函数更简洁，没有自己的this，this指向定义时所在作用域的this，且不会改变。
不可以当作构造函数，不可以使用new命令，不可以使用arguments，不可以使用yield命令。
21、显式绑定 this
可以使用 .call(), .apply(), 和 .bind() 方法来显式地设置 this 的值。
call() 和 apply() 以及 bind()的区别
call()：立即调用函数，并设置 this 值，接受多个参数。
apply()：接收参数不同，为数组。
bind()：不会调用函数而是创建一个新函数，其余和call一样。
22.MVVM工作原理
它采用双向绑定（data-binding），View的变动，自动反映在 ViewModel，反之亦然
23、Hash 模式和History 模式对比
Hash 模式只可以更改 # 后面的内容，History 模式可以通过 API 设置任意的同源 URL
History 模式可以通过 API 添加任意类型的数据到历史记录中，Hash 模式只能更改哈希值，也就是字符串
Hash 模式无需后端配置，并且兼容性好。History 模式在用户手动输入地址或者刷新页面的时候会发起 URL 请求，后端需要配置 index.html 页面用于匹配不到静态资源的时候
24、v-for和v-if 可以在同一个标签内使用吗？
可以但不推荐，因为优先级不同。
Vue3.0 v-if 比 v-for 的优先级更高，这意味着 v-if 的条件将无法访问到 v-for作用域内定义的变量别名。
Vue2.0 v-for的优先级比v-if高，会先循环，再判断，造成性能浪费。
25、计算属性和watch的区别
计算属性：定义一个属性，这个属性的值是基于其他属性值的计算结果，会因为其他属性值变化而更新。
Watch：可以监听任何 Vue 实例上的数据变化，并执行相应的函数。
26、Vue实现数据绑定的原理
Vue2 基于 Object.defineProperty 方法重定义对象的 getter 与 setter。
Vue3 基于 Proxy 代理对象，拦截对象属性的访问与赋值过程。
27、如何在 Vue 中实现服务端渲染 (SSR)？
使用 Vue.js 官方支持的 SSR 解决方案，例如 Nuxt.js。
或者手动设置服务器端渲染流程，使用vue-server-renderer 库。
服务器端渲染可以提高首屏加载速度和搜索引擎优化（SEO）。
（未完待续…）