面试题：Qwik 中 useSignal 与 useStore 在基础应用场景的差异

Question

请阐述在一个简单的计数器组件场景下，使用 useSignal 和 useStore 分别实现计数功能有何不同？包括数据更新机制、作用域等方面。

Answer 1

1. 数据更新机制

• useSignal：
  • useSignal 是 Vue 3.3 引入的响应式 API。它通过一个可变的信号值来跟踪数据变化。当信号值改变时，依赖该信号的部分会自动重新渲染。
  • 例如在计数器组件中，创建一个 signal 来存储计数值：

<script setup lang="ts">
import { signal } from 'vue';
const count = signal(0);
function increment() {
    count.value++;
}
</script>

<template>
    <div>
        <p>Count: {{ count.value }}</p>
        <button @click="increment">Increment</button>
    </div>
</template>

- 这里直接修改 `count.value` 就触发更新，它的更新粒度较细，依赖 `count` 的模板部分会重新渲染。

• useStore：
  • useStore 通常指 Vuex 的 useStore（在 Vue 应用中用于状态管理）。Vuex 使用集中式存储管理应用的所有组件的状态。
  • 在计数器场景下，首先在 Vuex 的 store 中定义状态和 mutation：

// store.js
import { createStore } from 'vuex';

const store = createStore({
    state() {
        return {
            count: 0
        };
    },
    mutations: {
        increment(state) {
            state.count++;
        }
    }
});

export default store;

- 然后在组件中使用 `useStore`：

<script setup lang="ts">
import { useStore } from 'vuex';
const store = useStore();
function increment() {
    store.commit('increment');
}
</script>

<template>
    <div>
        <p>Count: {{ $store.state.count }}</p>
        <button @click="increment">Increment</button>
    </div>
</template>

- 这里通过提交 mutation 来更新状态，Vuex 的更新机制基于整个 store 的状态变化，虽然可以通过模块等方式进行一定程度的细分，但相对来说粒度没有 signal 那么细。

2. 作用域

• useSignal：
  • 作用域主要在组件内部。每个组件使用自己的 signal，不同组件之间的 signal 相互独立，除非通过父子组件传值等方式进行关联。
  • 例如有两个计数器组件，每个组件都可以有自己独立的计数值，互相不受影响。
• useStore：
  • useStore 获取的是全局的 Vuex store。它的作用域是整个应用，所有组件都可以访问和修改 store 中的状态。
  • 在计数器场景下，如果多个组件都依赖和修改 store 中的 count，一个组件更新 count 会影响到所有依赖该状态的组件。这使得在大型应用中，可以方便地在不同组件间共享数据，但也需要小心管理以避免意外的状态变更。