深入理解Svelte的响应式系统：函数内部状态更新与外部声明的关联

<script>
  let count = 0;
  $: doubled = count * 2; // doubled 依赖于 count
  $: {
    console.log('Count changed:', count); // 此块依赖于 count
  }
</script>

<button on:click={() => count++}>Increment</button>
<p>Count: {count}</p>
<p>Doubled: {doubled}</p>

<script>
  let companyInformation = { vat: '' }; // 假设这是一个响应式对象，其属性会更新
  let vatSuccess = false;
  let vatError = null;

  function handleVatValidation() {
    // Vat is optional so putting nothing passes validation
    if (companyInformation.vat.length === 0) {
      vatSuccess = true;
      vatError = null;
      return null;
    }

    if (companyInformation.vat.length < 6) {
      vatSuccess = false;
      vatError = 'vat must be at least 6 characters';
      return 'vat must be at least 6 characters';
    }

    vatSuccess = true;
    console.log('Inside function - vatSuccess:', vatSuccess); // 此时 vatSuccess 确实变为 true
    vatError = null;
    return null;
  }

  // 期望这个响应式语句在 vatSuccess 改变时运行
  $: {
    console.log('Reactive statement - vatSuccess:', vatSuccess);
  }

  // 假设 handleVatValidation 在某个事件中被调用，例如 input 失去焦点或按钮点击
  // <input type="text" bind:value={companyInformation.vat} on:blur={handleVatValidation} />
</script>

<script>
  let companyInformation = { vat: '' }; // 假设这个对象是响应式的，其属性变化会触发更新
  let vatSuccess = false;
  let vatError = null;

  // 将 handleVatValidation 声明为响应式函数
  // Svelte会追踪函数体内部引用的所有变量（如 companyInformation.vat）
  // 当这些变量变化时，整个函数体会被重新评估和执行
  $: handleVatValidation = () => {
    if (companyInformation.vat.length === 0) {
      vatSuccess = true;
      vatError = null;
      return null;
    }

    if (companyInformation.vat.length < 6) {
      vatSuccess = false;
      vatError = 'vat must be at least 6 characters';
      return 'vat must be at least 6 characters';
    }

    vatSuccess = true;
    console.log('Inside reactive function - vatSuccess:', vatSuccess);
    vatError = null;
    return null;
  };

  // 现在，当 vatSuccess 被响应式函数更新时，这个语句会正确触发
  $: {
    console.log('Reactive statement - vatSuccess:', vatSuccess);
  }

  // 可以在需要时调用这个响应式函数，例如在模板中
  // <input type="text" bind:value={companyInformation.vat} on:blur={handleVatValidation} />
  // 或者，如果只是为了让内部逻辑响应 companyInformation.vat 的变化，
  // 那么 handleVatValidation 实际上不需要被显式调用，它的响应式声明本身就足够了。
  // 它会在 companyInformation.vat 变化时自动“运行”其逻辑。

  // 如果 handleVatValidation 只是为了在 companyInformation.vat 变化时更新 vatSuccess 和 vatError
  // 那么它甚至不需要在事件处理器中被调用，因为它已经是一个响应式声明了。
  // 它的逻辑会在 companyInformation.vat 变化时自动执行。
</script>

<p>VAT: {companyInformation.vat}</p>
<p>VAT Success: {vatSuccess}</p>
<p>VAT Error: {vatError}</p>

<!-- 模拟 companyInformation.vat 的变化 -->
<input type="text" bind:value={companyInformation.vat} placeholder="Enter VAT" />