Laravel Livewire 能否在视图渲染完成后更新组件变量？

需要优化Laravel Livewire页面加载体验，解决大数据量加载时页面等待过久的问题，核心诉求是：

• 首屏优先渲染完整页面框架，让用户立刻看到页面结构
• 等页面完全加载完成、用户已经看到框架之后，再异步拉取API/大数据更新组件变量
• 数据拉取过程中展示加载动画，给用户明确的加载反馈

之前对照Livewire生命周期说明做了测试，完全达不到预期效果。

测试代码 #

服务端组件逻辑 #

class Example extends Component
{
    public $test;

    public function mount()
    {
        $this->test = 'hi';
    }

    public function render()
    {
        return view('livewire.example');
    }

    public function hydrate()
    {
        $this->test = 'TEST1';
    }

    public function hydrateTest()
    {
        $this->test = 'TEST2';
    }

    public function dehydrate()
    {
        $this->test = 'TEST3';
    }
}

Blade视图代码 #

<div>
    <p>Hello World</p>
    <p>{{ $test }}</p>
</div>

实际测试现象 #

按照文档说明，dehydrate 钩子应该在render()方法执行完成后运行，理论上此时$test的值应该被改成TEST3，但实际页面上展示的始终是mount方法中设置的初始值hi。
另外已知Livewire提供了组件初始化相关的JavaScript钩子，但不清楚怎么通过这些JS钩子调用Livewire方法、更新组件变量，找不到符合需求的实现方案。

很多开发者会混淆Livewire钩子的实际执行时机：

• hydrate、hydrate* 类钩子，是前端发来的请求到达服务端后，组件从前端传来的状态快照重建内存实例完成时触发的，不属于首屏服务端渲染的流程环节
• dehydrate、dehydrate* 类钩子，是组件处理完当前请求的所有逻辑、要把最新状态打包成快照返回给前端之前触发的

核心误区：这个时间点Blade视图早已经完成渲染、生成好静态HTML字符串了。此时你再修改组件的公共变量值，根本不会影响已经生成好的HTML内容，只会写进返回给前端的状态快照里，要等下一次前端组件渲染时才会生效，自然首屏看到的还是mount阶段渲染的hi。

不需要在服务端生命周期钩子上反复调试，按照下面的步骤就能实现「首屏极速渲染、加载完成后异步拉数据」的效果：

1. 首屏渲染阶段，组件内的动态数据字段直接留空、设置占位默认值，服务端完全不做API请求、慢数据库查询这类重逻辑，保证Blade能快速生成HTML返回给浏览器，让用户立刻看到完整的页面框架
2. 在数据占位区域绑定Livewire的加载状态，数据拉取过程中自动展示加载动画
3. 利用Livewire前端初始化钩子，等DOM完全加载后自动调用组件内专门编写的异步拉取方法，触发后端请求获取数据，等请求返回后自动更新组件变量、替换加载占位

参考实现代码 #

服务端组件调整 #

把所有重数据拉取逻辑从首屏流程挪到独立方法里：

class Example extends Component
{
    // 首屏留空，不做任何重逻辑
    public $apiData = null;

    // 专门处理页面加载完成后的异步数据拉取
    public function loadAsyncData()
    {
        // 把原来会阻塞首屏的API请求、大数据查询全部挪到这里执行
        $this->apiData = \Http::get('目标API地址')->json();
    }

    public function render()
    {
        // 渲染阶段不处理任何重逻辑，直接返回视图即可
        return view('livewire.example');
    }
}

Blade视图调整 #

加好加载占位、绑定前端触发逻辑：

<div>
    {{-- 静态框架内容，首屏立刻展示 --}}
    <p>Hello World</p>

    {{-- 动态数据占位区域 --}}
    <div>
        {{-- 加载动画：异步请求执行时自动显示 --}}
        <div wire:loading class="loading-tip">
            数据加载中，请稍候...
        </div>

        {{-- 实际数据展示区：请求完成后自动显示 --}}
        <div wire:loading.remove>
            @if($apiData)
                <pre>{{ json_encode($apiData, JSON_PRETTY_PRINT) }}</pre>
            @else
                暂无加载完成的数据
            @endif
        </div>
    </div>
</div>

{{-- 组件初始化完成后自动触发数据拉取 --}}
@script
<script>
    // 等Livewire组件在前端完全初始化后触发拉取
    Livewire.on('component.init', () => {
        $wire.loadAsyncData()
    })
</script>
@endscript

实现注意事项 #

• 不要在mount方法、render方法里放任何需要等待网络请求、慢查询的逻辑，这类逻辑会直接拉长服务端返回HTML的时间，破坏首屏快速渲染的体验
• dehydrate类钩子的定位是做全局状态序列化、统一逻辑处理，不适合用来做需要更新当前返回HTML的操作，毕竟它执行时HTML字符串已经生成完毕
• 如果不需要等整个DOM完全加载，也可以直接用Livewire自带的wire:init指令，在组件刚挂载时就触发拉取，写法更简洁，比如在组件根元素上加wire:init="loadAsyncData"即可实现同样的异步触发效果

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