158期
1. Vue中还有其他方法实现 v-model 双向绑定吗？
2. vue 的响应式开发比命令式有哪些优势？
3. React.memo() 和 useMemo() 的用法是什么，有哪些区别？
上面问题的答案会在第二天的公众号(程序员每日三问)推文中公布
也可以小程序刷题，已收录500+面试题及答案
157期问题及答案
1. Vue中Scoped Styles 为什么可以实现样式隔离？
Vue中的Scoped Styles使得组件内部的样式仅在该组件内部生效，实现样式的隔离。这一功能的实现基于Vue单文件组件（Single File Components）的<style>标签的scoped属性。
当你在<style>标签中加上scoped属性，Vue在编译组件的时候会进行特殊处理：
Vue会为组件内部的每个DOM节点添加一个独一无二的动态属性（例如
data-v-f3f3eg9）。同时，Vue会修改
scoped样式，使其选择器额外匹配这个独特的属性。例如，如果你有.my-button { color: red; }这样的样式，Vue将会将其转化为类似于.my-button[data-v-f3f3eg9] { color: red; }的样式。最终编译出的CSS被注入到页面中时，因为CSS规则增加了对应的属性选择器，所以这些样式只会应用到有相应属性的元素上。因此，即使相同的类名被用在组件外部，它们也不会受到这些样式规则的影响。
这种方式允许开发者在单文件组件内编写CSS样式，而不用担心同一个类名在不同组件之间可能会产生冲突。每个组件都有其独立作用域的样式，从而实现了样式的隔离。
请注意，虽然Scoped Styles提供了样式隔离，但它不是完全严格的隔离。例如，子组件的根节点会受到父组件scoped样式的影响，因为它在父组件的作用域中。因此，如果需要更严格的隔离，可能要考虑其他策略，比如使用更具体的类名，CSS Modules，或者其他CSS-in-JS库来帮助管理样式规则。
2. canvas 和 webgl 有什么区别？
Canvas和WebGL都是用于在Web浏览器中绘制图形的技术，但它们有一些重要的区别：
2D绘图 vs. 3D绘图:
Canvas: Canvas是HTML5中的一个元素（
<canvas>），用于绘制2D图形。它提供了一个简单的API，可以在Canvas上绘制图像、文本、路径等2D图形。WebGL: WebGL（Web Graphics Library）是一种基于OpenGL的Web 3D图形渲染技术，用于在Web浏览器中创建和渲染3D图形。它允许开发者使用OpenGL API在浏览器中进行高性能的3D渲染。
API复杂性:
Canvas: Canvas的API相对简单，适用于2D图形绘制，包括绘制路径、文本、图像等。通常更容易学习和使用。
WebGL: WebGL的API相对复杂，因为它涉及到底层的3D图形编程，需要了解着色器、缓冲区、着色器程序等概念，相对于Canvas来说学习曲线较陡峭。
性能和功能:
Canvas: 2D Canvas通常用于简单的图形、图像和游戏，性能较WebGL差。但对于简单的绘图需求，Canvas足够了。
WebGL: WebGL具有更高的性能，可以处理复杂的3D渲染任务，包括游戏、数据可视化和模拟等。
适用场景:
Canvas: 适用于2D图形、图像编辑、图表绘制等场景，以及需要较低复杂度和性能要求的2D游戏。
WebGL: 适用于需要高性能的3D图形渲染、虚拟现实（VR）、游戏开发、科学可视化和模拟等复杂3D应用程序。
浏览器支持:
Canvas: 2D Canvas在所有现代浏览器中都有很好的支持，包括移动浏览器。
WebGL: WebGL在大多数现代浏览器中得到支持，但在某些老旧或受限制的浏览器中可能不被支持或需要启用。
总之，Canvas适用于简单的2D图形绘制，而WebGL更适合复杂的3D图形渲染。选择哪种技术取决于你的项目需求和目标。如果你需要在Web中创建高性能的3D图形应用程序，那么WebGL是一个更好的选择。如果你只需要进行简单的2D图形绘制，那么Canvas可能更合适。
3. 如果空数组调用reduce会发生什么？
当空数组调用 reduce 方法时，它将返回一个错误（TypeError），因为 reduce 方法需要一个初始值或累积器函数来执行归约操作。在空数组中没有元素来进行累积操作，所以需要提供一个初始值或累积器函数。
如果你调用 reduce 而没有提供初始值或累积器函数，例如：
const emptyArray = [];
const result = emptyArray.reduce((accumulator, currentValue) => {
// 这里是归约操作的逻辑
}, initialValue);那么会得到一个类似如下的错误：
TypeError: Reduce of empty array with no initial value为了解决这个问题，你可以提供一个初始值作为 reduce 方法的第二个参数，例如：
const emptyArray = [];
const initialValue = 0;
const result = emptyArray.reduce((accumulator, currentValue) => {
// 这里是归约操作的逻辑
}, initialValue);或者，你可以使用 reduce 方法的第三个参数，将累积器函数的初始值设置为一个非空的初始值：
const emptyArray = [];
const result = emptyArray.reduce((accumulator, currentValue) => {
// 这里是归约操作的逻辑
}, 0); // 将初始值设为0这样就可以避免空数组调用 reduce 时的错误。
我要提问
如果你遇到有趣的面试题，或者有想知道的前端面试题，可以在下面的小程序提问，收到问题后会在第一时间为你解答。
我要出题
学习不打烊，充电加油只为遇到更好的自己,每天早上9点纯手工发布面试题，每天坚持花20分钟来学习与思考，在千变万化，类库层出不穷的今天，不要等到找工作时才狂刷题，提倡每日学习。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
