優(yōu)化

對(duì)于上述問題，WePY 中封裝了兩種概念去解決：

• 預(yù)加載數(shù)據(jù)用于 page1 主動(dòng)傳遞數(shù)據(jù)給 page2，比如 page2 需要加載一份耗時(shí)很長的數(shù)據(jù)。我可以在 page1 閑時(shí)先加載好，進(jìn)入 page2 時(shí)直接就可以使用。
• 預(yù)查詢數(shù)據(jù)用于避免于 redirecting 延時(shí)，在跳轉(zhuǎn)時(shí)調(diào)用 page2 預(yù)查詢。

擴(kuò)展了生命周期，添加了onPrefetch事件，會(huì)在 redirect 之時(shí)被主動(dòng)調(diào)用。同時(shí)給onLoad事件添加了一個(gè)參數(shù)，用于接收預(yù)加載或者是預(yù)查詢的數(shù)據(jù)：

// params
// data.from: 來源頁面，page1
// data.prefetch: 預(yù)查詢數(shù)據(jù)
// data.preload: 預(yù)加載數(shù)據(jù)
onLoad (params, data) {}

預(yù)加載數(shù)據(jù)示例：

// page1.wpy 預(yù)先加載 page2 需要的數(shù)據(jù)。

methods: {
  tap () {
    this.$redirect('./page2');
  }
},
onLoad () {
  setTimeout(() => {
    this.$preload('list', api.getBigList())
  }, 3000)
}

// page2.wpy 直接從參數(shù)中拿到 page1 中預(yù)先加載的數(shù)據(jù)
onLoad (params, data) {
  data.preload.list.then((list) => render(list));
}

預(yù)查詢數(shù)據(jù)示例：

// page1.wpy 使用封裝的 redirect 方法跳轉(zhuǎn)時(shí)，會(huì)調(diào)用 page2 的 onPrefetch 方法
methods: {
  tap () {
    this.$redirect('./page2');
  }
}

// page2.wpy 直接從參數(shù)中拿到 onPrefetch 中返回的數(shù)據(jù)
onPrefetch () {
  return api.getBigList();
}
onLoad (params, data) {
  data.prefetch.then((list) => render(list));
}