面试题：Solid.js 中 createEffect 的中等难度应用

Question

在 Solid.js 项目中，假设有一个包含用户信息的响应式对象 `userInfo`，其中有 `name` 和 `age` 字段。请使用 `createEffect` 实现当 `userInfo` 中的 `name` 发生变化时，在控制台打印 '用户姓名已更新'，并且在 `age` 发生变化时，在控制台打印 '用户年龄已更新'，同时阐述 `createEffect` 在这个场景中如何实现响应式监听。

Answer 1

import { createEffect, createSignal } from "solid-js";

// 创建响应式对象
const [userInfo, setUserInfo] = createSignal({
  name: '初始姓名',
  age: 0
});

createEffect(() => {
  const { name, age } = userInfo();
  // 监听name变化
  createEffect(() => {
    console.log('用户姓名已更新');
  }, [name]);
  // 监听age变化
  createEffect(() => {
    console.log('用户年龄已更新');
  }, [age]);
});

createEffect 在该场景中的响应式监听原理

1. 依赖收集：createEffect 会自动收集其回调函数中使用到的响应式数据（这里是 userInfo() 返回对象中的 name 和 age）作为依赖。当这些依赖发生变化时，createEffect 所包裹的回调函数会被重新执行。
2. 细粒度控制：通过在内部嵌套 createEffect，并将具体的依赖（name 或 age）作为第二个参数传入，实现对每个字段变化的细粒度监听。只有对应的依赖发生变化，才会触发相应的 createEffect 回调函数，从而在控制台打印对应的更新信息。