在前端开发中，我们经常需要从服务器获取数据。由于网络请求的不确定性，数据可能需要一些时间才能返回，这就会导致页面在等待数据的过程中出现卡顿或者空白的情况，给用户带来不好的体验。因此，我们需要在异步数据加载时添加 Loading 效果，提示用户数据正在加载中。
在 Vue.js 中，实现异步数据加载时的 Loading 效果非常简单，我们可以通过 Vue 的生命周期函数和条件渲染来实现。
使用 Vue 生命周期函数
Vue 提供了一些生命周期函数，可以让我们在组件的不同阶段执行一些操作。其中，我们可以使用 mounted 和 beforeUpdate 生命周期函数来实现 Loading 效果。
mounted 生命周期函数
mounted 生命周期函数在组件挂载到 DOM 上后执行，此时可以通过异步请求获取数据。我们可以在 mounted 函数中添加一个 Loading 状态，表示数据正在加载中。当数据请求成功后，将 Loading 状态设为 false，数据将会显示在页面上。
-- -------------------- ---- -------
----------
-----
---- -------------------------------
--- -------
--- ----------- -- ----- ----------------- --------- -------
-----
------
-----------
--------
------ ------- -
------ -
------ -
----- ---
-------- ----
--
--
--------- -
-- ------
--------------------- -- -
--------- - -----
------------ - ------
---
-
--
---------beforeUpdate 生命周期函数
在一些特殊的情况下，我们可能需要在数据更新前添加 Loading 效果，这时可以使用 beforeUpdate 生命周期函数。
-- -------------------- ---- -------
----------
-----
---- -------------------------------
--- -------
--- ----------- -- ----- ----------------- --------- -------
-----
------- -------------------------
------
-----------
--------
------ ------- -
------ -
------ -
----- ---
-------- -----
--
--
--------- -
-- ------
--------------------- -- -
--------- - -----
---
--
-------- -
----- -
------------ - -----
-- ------
------------------- -- -
---------------------
------------ - ------
---
-
--
-------------- -
-- -------------- -
-- -- ------- --
-
-
--
---------使用条件渲染
除了使用生命周期函数，我们还可以使用条件渲染来实现 Loading 效果。通过给 Loading 元素添加 v-if 指令，可以根据数据是否加载完成来决定是否显示 Loading 元素。
-- -------------------- ---- -------
----------
-----
---- -------------------------------
--- -------
--- ----------- -- ----- ----------------- --------- -------
-----
------
-----------
--------
------ ------- -
------ -
------ -
----- ---
-------- ----
--
--
--------- -
-- ------
--------------------- -- -
--------- - -----
------------ - ------
---
-
--
---------总结
在 Vue.js 中实现异步数据加载时的 Loading 效果非常简单，我们可以通过 Vue 的生命周期函数和条件渲染来实现。在实际开发中，我们可以根据实际情况选择使用哪种方式，以达到最佳的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65867e2cd2f5e1655d0f1e71