面试题：Qwik中useSignal与useStore在基础使用上的区别

useSignal

基础使用场景区别：
- useSignal主要用于管理简单的、响应式的单一值。它的更新会触发组件重新渲染，且是细粒度的更新，只影响依赖该信号的部分。
适用的数据状态管理：
- 适用于管理像用户登录状态（布尔值）、页面加载状态（布尔值）、当前选中的某个元素的ID（数字或字符串）等简单的、独立的数据状态。
举例：

import { component$, useSignal } from '@builder.io/qwik';

export const MyComponent = component$(() => {
  const isLoading = useSignal(false);

  const handleClick = () => {
    isLoading.value = true;
    // 模拟数据加载
    setTimeout(() => {
      isLoading.value = false;
    }, 2000);
  };

  return (
    <div>
      <button onClick={handleClick}>Load Data</button>
      {isLoading.value && <p>Loading...</p>}
    </div>
  );
});

在这个例子中，isLoading信号管理着页面的加载状态，按钮点击时更新该信号，页面上依赖isLoading的部分（显示“Loading...”）会相应更新。

useStore

基础使用场景区别：
- useStore用于管理复杂的、包含多个相关属性的状态对象。它允许跨组件共享状态，并且在状态对象的任何属性变化时，会触发依赖该状态对象的组件重新渲染。
适用的数据状态管理：
- 适用于管理用户信息对象（包含姓名、年龄、地址等多个属性）、购物车数据（包含多个商品项，每个商品项又有不同属性）等复杂的、成组的数据状态。
举例：

import { component$, useStore } from '@builder.io/qwik';

interface User {
  name: string;
  age: number;
}

export const UserComponent = component$(() => {
  const user = useStore<User>({ name: 'John', age: 30 });

  const handleAgeIncrement = () => {
    user.age++;
  };

  return (
    <div>
      <p>{user.name} is {user.age} years old.</p>
      <button onClick={handleAgeIncrement}>Increment Age</button>
    </div>
  );
});

在这个例子中，user状态对象包含name和age属性，useStore管理这个复杂对象，按钮点击更新age属性时，依赖user的组件部分会重新渲染。

星途面试题库

面试题：Qwik中useSignal与useStore在基础使用上的区别

知识考点

面试题答案

useSignal

useStore