158. 面试官：Vue中还有其他方法实现 v-model 双向绑定吗？

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在编译组件的时候会进行特殊处理：

1. Vue会为组件内部的每个DOM节点添加一个独一无二的动态属性（例如data-v-f3f3eg9）。

2. 同时，Vue会修改scoped样式，使其选择器额外匹配这个独特的属性。例如，如果你有.my-button { color: red; }这样的样式，Vue将会将其转化为类似于.my-button[data-v-f3f3eg9] { color: red; }的样式。

3. 最终编译出的CSS被注入到页面中时，因为CSS规则增加了对应的属性选择器，所以这些样式只会应用到有相应属性的元素上。因此，即使相同的类名被用在组件外部，它们也不会受到这些样式规则的影响。

这种方式允许开发者在单文件组件内编写CSS样式，而不用担心同一个类名在不同组件之间可能会产生冲突。每个组件都有其独立作用域的样式，从而实现了样式的隔离。

请注意，虽然Scoped Styles提供了样式隔离，但它不是完全严格的隔离。例如，子组件的根节点会受到父组件scoped样式的影响，因为它在父组件的作用域中。因此，如果需要更严格的隔离，可能要考虑其他策略，比如使用更具体的类名，CSS Modules，或者其他CSS-in-JS库来帮助管理样式规则。

2. canvas 和 webgl 有什么区别？

Canvas和WebGL都是用于在Web浏览器中绘制图形的技术，但它们有一些重要的区别：

1. 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分钟来学习与思考，在千变万化，类库层出不穷的今天，不要等到找工作时才狂刷题，提倡每日学习。