AlpineJS中x-init更新x-data后前端未同步，如何解决？

问题原因 #

你在全局函数setVal中直接通过this.val = false修改变量时，没有触发Alpine.js的响应式更新机制。Alpine依赖Proxy代理对象追踪属性变化，全局函数中的直接赋值操作绕过了Proxy的setter监听，导致视图无法同步更新。

解决方案 #

以下是三种可行的解决方式：

方式一：使用Alpine内置的$set方法触发响应式更新

通过$set方法主动通知Alpine更新变量，确保视图同步：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="//unpkg.com/alpinejs" defer></script>
  </head>
  <body>
    <div x-data="{ val: true }" x-init="setVal()">
      <div><span x-text="val"></span></div>
      <template x-if="val">
        <div>Renders on x-if directive.</div>
      </template>
    </div>

    <script>
      function setVal() {
        this.$set(this, 'val', false);
        console.log("val", this.val);
      }
    </script>
  </body>
</html>

方式二：将方法定义在x-data内部

把setVal方法放到x-data的响应式上下文里，此时this指向Alpine代理过的对象，直接赋值会自动触发视图更新：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="//unpkg.com/alpinejs" defer></script>
  </head>
  <body>
    <div x-data="{ 
      val: true,
      setVal() {
        this.val = false;
        console.log('val', this.val);
      }
    }" x-init="setVal()">
      <div><span x-text="val"></span></div>
      <template x-if="val">
        <div>Renders on x-if directive.</div>
      </template>
    </div>
  </body>
</html>

方式三：直接在x-init中执行赋值逻辑

如果逻辑简单，无需单独封装函数，直接在x-init内修改变量即可：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="//unpkg.com/alpinejs" defer></script>
  </head>
  <body>
    <div x-data="{ val: true }" x-init="val = false; console.log(val)">
      <div><span x-text="val"></span></div>
      <template x-if="val">
        <div>Renders on x-if directive.</div>
      </template>
    </div>
  </body>
</html>

内容的提问来源于stack exchange，提问作者Soma Juice