Vue.js中文手册
> Vue.js中文手册 > data

data(transition) [-> Promise]

在激活阶段被调用，在 activate 被断定（ resolved ，指该函数返回的 promise 被 resolve ）。用于加载和设置当前组件的数据。

参数

  • transition {Transition}

    调用 transition.next(data) 会为组件的 data 相应属性赋值。例如，使用 { a: 1, b: 2 } ，路由会调用 component.$set('a', 1) 以及 component.$set('b', 2) 。

预期返回值

  • 可选择性返回一个Promise

    • resolve(data) -> transition.next(data)
    • reject(reason) -> transition.abort(reason)
  • 或者，返回一个包含 Promise 的对象。见后文 Promise 语法糖

详情

data 切换钩子会在 activate 被断定（ resolved ）以及界面切换之前被调用。切换进来的组件会得到一个名为 $loadingRouteData 的元属性，其初始值为 false ，在 data 钩子函数被断定后会被赋值为 true 。这个属性可用来会切换进来的组件展示加载效果。

data 钩子和 activate 钩子的不同之处在于：

  1. data在每次路由变动时都会被调用，即使是当前组件可以被重用的时候，但是 activate 尽在组件是新创建时才会被调用。

    假设我们有一个组件对应于路由 /message/:id ，当前用户所处的路径是 /message/1 。当用户浏览 /message/2 时，当前组件可以被重用，所以 activate 不会被调用。但是我们需要根据新的 id 参数去获取和更新数据，所以大部分情况下，在 data 中获取数据比在 activate 中更加合理。

  2. activate 的作用是控制切换到新组件的时机。data 切换钩子会在 activate 被断定（ resolved ）以及界面切换之前被调用，所以数据获取和新组件的切入动画是并行进行的，而且在 data 被断定（ resolved ）之前，组件会处在“加载”状态。

    从用户体验的角度来看一下两者的区别：

    • 如果我们等到获取到数据之后再显示新组件，用户会感觉在切换前界面被卡住了。

    • 相反的话（指不用等到获取数据后再显示组件），我们立刻响应用户的操作，切换视图，展示新组件的“加载”状态。如果我们在 CSS 中定义好相应的效果，这正好可以用来掩饰数据加载的时间。

这么说的话，如果你想等到数据获取之后再切换视图，可以在组件定义路由选项时，添加 waitForData: true 参数。

例子

调用 transition.next ：

route: {
  data: function (transition) {
    setTimeout(function () {
      transition.next({
        message: 'data fetched!'
      })
    }, 1000)
  }
}

返回 Promise ：

route: {
  data: function () {
    return messageService
      .fetch(transition.to.params.messageId)
      .then(function (message) {
        return { message: message }
      })
  }
}

并发请求，利用 Promise & ES6 :

route: {
  data ({ to: { params: { userId }}}) {
    return Promise.all([
      userService.get(userId),
      postsService.getForUser(userId)
    ]).then(([user, post]) => ({ user, post }))
  }
}

与上面等价的 ES5 版本：

route: {
  data (transition) {
    var userId = transition.to.params.userId
    return Promise.all([
      userService.get(userId),
      postsService.getForUser(userId)
    ]).then(function (data) {
      return {
        user: data[0],
        posts: data[1]
      }
    })
  }
}

在模板中使用 $loadingRouteData ：

<div class="view">
  <div v-if="$loadingRouteData">Loading ...</div>
  <div v-if="!$loadingRouteData">
    <user-profile user="{{user}}"></user-profile>
    <user-post v-repeat="post in posts"></user-post>
  </div>
</div>

Promise 语法糖

上面的并发请求示例需要我们自己调用 Promise.all 来将多个 Promise 合并成一个，并且最终处理返回的数据时也有些繁琐。Vue-router 在这里提供了一个语法糖，让我们可以在 data 函数中直接返回一个包含 Promise 的对象（当然也可以包含非 Promise 的值）。利用这个语法糖和 ES6，我们可以这样实现上面的例子：

route: {
  data: ({ to: { params: { userId }}}) => ({
    user: userService.get(userId),
    post: postsService.getForUser(userId)
  })
}

路由器将会在这两个 Promise resolve 之后的值分别赋值给组件的 user 和 post 属性。同时，$loadingRouteData 会在所有的 Promise 都 resolve 之后被设置为 false。

上面的例子在 ES5 下可以这样写:

route: {
  data: function (transition) {
    var userId = transition.to.params.userId
    return {
      user: userService.get(userId),
      post: postsService.getForUser(userId)
    }
  }
}
上一篇：
下一篇：