从 v0.x 迁移到 v1.0

入口文件中 createApp 函数的返回值

  • v0.x 中:

createApp 函数的返回值是一个对象,其中包含应用实例(new Vue())、路由实例等:

export default function createApp() {
  const router = new VueRouter({/* ... */})
  const app = new Vue({/* ... */})

  return { app, router }
}
  • v1.0 中:

createApp 函数要求返回根组件选项(rootOptions):

export default function createApp() {
  const router = new VueRouter({/* ... */})

  // rootOptions
  const app = {
    router,
    render: h => h('div')
    // ...
  }

  return app
}

移除 ctx.replaceState()

  • v0.x 中:

创建 store 实例后,需要立即调用 ctx.replaceState()

// The Entry file

export default function createApp () {
  // ...

  // Create store instance
  const store = createStore()
  ctx.replaceState(store) // This is necessary, vapper will use it to mix data(from server to client).

  // ...

  // return
  return { app, router, store }
}
  • v1.0 中:

不再需要调用 ctx.replaceState()

// The Entry file

export default function createApp () {
  // ...

  // Create store instance
  const store = createStore()

  const app = {
    // ...
    store
  }

  // return
  return app
}
  • v0.x 中:

为了在组件内访问到 $cookie,我们需要手动编写 mixin

// Entry file

Vue.mixin({
  created () {
    this.$cookie = this.$root.$options.$cookie
  }
})

export default function createApp (ctx) {
  new Vue({
    $cookie: ctx.$cookie
    // other options...
  })
}
  • v1.0 中:

不再需要手动编写 mixin 即可直接在组件中使用。

context 对象的变更

客户端 context

  • v0.x 中:

客户端的 context 对象如下:

context = {
  Vue,  // the Vue constructor
  type: TYPE, // type is 'server' or 'client'
  pluginRuntimeOptions: createApp.pluginRuntimeOptions  // createApp.pluginRuntimeOptions
}
  • v1.0 中:

去掉了 Vue

context = {
  type: TYPE, // type is 'server' or 'client'
  pluginRuntimeOptions: createApp.pluginRuntimeOptions  // createApp.pluginRuntimeOptions
}

服务端 context

  • v0.x 中:

服务端的 context 对象如下:

context = {
  Vue,  // Vue 构造函数
  type: TYPE, // type 是 'server' 或者 'client'
  pluginRuntimeOptions: createApp.pluginRuntimeOptions,  // createApp.pluginRuntimeOptions
  req: context.req, // 请求对象
  res: context.res, // 响应对象
  isFake  // 布尔值,标识着是否进行真正的渲染
}
  • v1.0 中:

去掉了 Vue,并添加了 context.url

context = {
  type: TYPE, // type 是 'server' 或者 'client'
  pluginRuntimeOptions: createApp.pluginRuntimeOptions,  // createApp.pluginRuntimeOptions
  req: context.req, // 请求对象
  res: context.res, // 响应对象
  isFake,  // 布尔值,标识着是否进行真正的渲染
  url: req.url  // 请求的 url
}

错误处理 - 自定义错误页面

v1.0 中我们对错误处理进行了重构,核心规则如下:

  • 如果 enableCustomErrorPage: false,则回退 SPA

  • 如果 enableCustomErrorPage: true,但是没有提供 ErrorComponent 组件,则回退 SPA

  • 如果 enableCustomErrorPage: true,并且提供了 ErrorComponent 组件,但 ErrorComponent 组件内部出错,则回退 SPA

换句话说,可以有选择的在 ErrorComponent 组件内抛出错误,来实现在自定义错误页面和回退 SPA 这两个模式间自由切换。

详情请阅读:错误处理 - 自定义错误页面