在现代 web 开发中，单页应用（SPA）的开发模式越来越流行。Vue.js 作为一款轻量级的前端框架，已经成为了许多开发者的首选。在实现 SPA 中异步数据渲染方面，Vue.js2.0 提供了多种方式，下面我们来一一进行探讨。
1. 使用 Vue.js 内置的 Ajax 库
Vue.js 2.0 内置的 Ajax 库是 vue-resource，它提供了一整套的 API 用来处理异步请求，我们可以在组件内直接使用它。以下是一个使用该库实现简单数据请求的示例：
-- -------------------- ---- ------- ----- --- - --- ----- --- ------- ----- - ------ -- -- --------- - -------------------------------------------- -- - ---------- - -------------- --- - ---展开代码
这段代码从 /api/items 路径中获取数据，并将响应体中的 JSON 数组赋值给 Vue 实例中的 items 属性。在页面渲染的时候，组件会自动更新显示。
2. 使用 Axios 库
Axios 是一款基于 Promise 的轻量级 HTTP 客户端库，可以在浏览器和 Node.js 中使用。需要安装 Axios 库（可以使用 npm 安装），示例代码如下：
-- -------------------- ---- ------- ----- --- - --- ----- --- ------- ----- - ------ -- -- --------- - ----------------------- ---------------- -- - ---------- - -------------- --- - ---展开代码
这段代码和使用 vue-resource 库的示例代码非常相似，唯一的区别是使用了 axios.get() 方法代替了 this.$http.get() 方法。
值得注意的是，使用此方法需要先安装 axios 库：可以通过 npm install axios 安装。
3. 使用 async/await 标准
在 ES 2017 标准中，引入了 async/await 的语法糖，可以让异步请求的代码更加直观易懂。对于 Vue.js 2.0，我们可以在组件内使用该特性，示例代码如下：
-- -------------------- ---- ------- ----- --- - --- ----- --- ------- ----- - ------ -- -- ----- --------- - --- - ----- -------- - ----- -------------------- ---------- - ----- ---------------- - ----- ------- - ------------------- - - ---展开代码
这段代码通过浏览器内置的 fetch 方法获取数据，并将响应体中的 JSON 数组赋值给 Vue 实例中的 items 属性。在使用 async/await 标准之前，需要将 mounted 函数声明为异步函数，之后可以使用 try-catch 语句来捕获请求过程中的错误。
值得注意的是，虽然此方法看起来最为直观，但是其兼容性较差，支持浏览器版本较低的用户可能无法使用该特性。
总结
以上三种方法，都是实现 Vue.js 2.0 异步请求的可行方式，其中 Vue.js 内置的 vue-resource 库使用更为方便，但是并不具有较好的兼容性；Axios 库则可以兼容到 IE 7 及以上版本，具有较好的可用性；使用 async/await 标准则最为直观，但是需要用户浏览器支持该特性。
因此，在实际开发中需要根据项目的特性和实际情况来选取合适的方法。不管你采用哪种方式，都要记得在异步请求完成后，同步更新 Vue 实例中的数据，以便保证页面正常渲染。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651c1b2e95b1f8cacd3acc7c
