两道代码题 👌

面试题 1

完成 Component 类代码的书写，要求：

  1. 修改数据时能够触发 render 方法的执行
  2. 同步变更时需要合并，仅触发一次 render 方法
class Component {
    data = {
        name: "",
    };
    constructor() {}
    render() {
        console.log(`render - name: ${this.data.name}`);
    }
}

const com = new Component();
// 要求以下代码需要触发 render 方法，并且同步变更需要合并
com.data.name = "张三";
com.data.name = "李四";
com.data.name = "王五";

setTimeout(() => {
    com.data.name = "AK";
}, 0);

答案：

首先通过 Proxy 代理使得属性值的更改可以被监听到，从而可以同步的触发 render 函数。

class Component {
    // 实例属性，每个实例都有自己的副本
    // 等同于在constructor中写 this.data = { name: "" }
    _data = {
        name: "",
    };
    constructor() {
        this.data = new Proxy(this._data, {
            set: (target, key, value) => {
                // 1. 设置值
                this._data[key] = value;
                // 2.触发更新
                this.render();
            },
        });
    }
    // 原型方法，所有实例共享
    render() {
        console.log(`render - name: ${this.data.name}`);
    }
}

由于同步代码的变更引起的 render 函数需要合并，因此 rener 函数的触发需要在所有同步的属性值设置后触发，所以可以借用 nextTick 的思想可以通过将更新操作放到微任务队列中并通过开关来控制微任务的个数，从而实现异步的触发更新操作。

class Component {
    // 实例属性，每个实例都有自己的副本
    // 等同于在constructor中写 this.data = { name: "" }
    _data = {
        name: "",
    };
    pending = false; // 开关
    constructor() {
        this.data = new Proxy(this._data, {
            set: (target, key, value) => {
                // 1. 设置值
                this._data[key] = value;
                // 2. 异步触发更新
                if (!this.pending) {
                    this.pending = true;
                    // 借用 nextTick 的思想，将更新操作放到微任务队列中
                    Promise.resolve().then(() => {
                        // 触发更新
                        this.render();
                        this.pending = false;
                    });
                }
            },
        });
    }
    // 原型方法，所有实例共享
    render() {
        console.log(`render - name: ${this.data.name}`);
    }
}

const com = new Component();
// 要求以下代码需要触发 render 方法，并且同步变更需要合并
com.data.name = "张三";
com.data.name = "李四";
com.data.name = "王五";

setTimeout(() => {
    com.data.name = "AK";
}, 0);

面试题 2

以下两段代码在 Vue 中分别渲染几次？为什么？

代码一：

<template>
    <div>{{ rCount }}</div>
</template>
<script setup>
import { ref } from "vue";
const count = 0;
const rCount = ref(count);
for (let i = 1; i <= 5; ++i) {
    rCount.value = i;
}
</script>

代码二：

<template>
    <div>{{ rCount }}</div>
</template>
<script setup>
import { ref } from "vue";
const count = 0;
const rCount = ref(count);
for (let i = 1; i <= 5; ++i) {
    setTimeout(() => {
        rCount.value = i;
    }, 0);
}
</script>
  • 代码一：2 次，初始化渲染 1 次，之后虽然在 for 循环中修改了 5 次响应式数据，但是会被合并，因此之后只会渲染 1 次。
  • 代码二：6 次，初始化渲染 1 次，之后每一个 setTimeout 中修改一次响应式数据就会渲染 1 次。

参考答案：

代码一（同步赋值）

会渲染两次：

  1. 初始化渲染一次：在组件挂载时，Vue 会进行一次初始渲染，将 rCount 的初始值 0 渲染到 DOM 中。

  2. 响应式数据更新和批处理：

  • 在 for 循环中，rCount.value 被依次赋值为 1, 2, 3, 4, 5. 每次赋值时，Vue 的响应式系统会检测到数据的变化。
  • 然而，这些变化发生在同一个同步代码块内，Vue 会将这些变化推入异步更新队列中。因为这些赋值操作是同步执行的，Vue 会在当前事件循环结束时对这些变化进行批处理（batching）
  • Vue 的批处理机制会将这些同步的更改合并为一次更新，因此，无论有多少次对 rCount.value 的赋值，最终只会在异步队列中触发一次渲染更新。
  1. 最终渲染一次：由于 Vue 的批处理机制，这段代码最终只会触发 一次 DOM 更新，渲染出 rCount 的最终值 5.

总计渲染次数：2 次（初始化渲染 1 次 + 批处理渲染 1 次）

代码二（异步赋值）

会渲染六次：

  1. 初始化渲染一次：同样，组件挂载时会进行一次初始渲染，将 rCount 的初始值 0 渲染到 DOM 中。

  2. 异步更新渲染：

  • 在 for 循环中，每次迭代都会创建一个 setTimeout，每个 setTimeout 会在 0 毫秒后异步执行。在每个 setTimeout 的回调中，rCount.value 被依次赋值为 1, 2, 3, 4, 5
  • 由于每次赋值都发生在一个独立的异步回调中，Vue 的响应式系统会在每个异步回调执行后，立即触发相应的更新流程。每次 setTimeout 回调都会使 rCount.value 发生变化，因此每次都需要进行一次渲染更新。
  1. 每个异步回调导致一次渲染：因此，这段代码会触发 5 次 DOM 更新，每次将 rCount 渲染为 1 到 5.

总计渲染次数：6 次（初始化渲染 1 次 + 5 次异步更新渲染）

最近更新：:
Contributors: AK