vue ssr 指南详读(2)

/* 第一种方式 */ Vue.mixin({ beforeMount () { const { asyncData } = this.$options console.log('beforeMount',this.$store) if (asyncData) { // 将获取数据操作分配给 promise // 以便在组件中，我们可以在数据准备就绪后 // 通过运行 `this.dataPromise.then(...)` 来执行其他任务 this.dataPromise = asyncData({ store: this.$store, route: this.$route }) } }, beforeRouteUpdate (to, from, next) { const { asyncData } = this.$options console.log('beforeRouteUpdate',this.$store) if (asyncData) { asyncData({ store: this.$store, route: to }).then(next).catch(next) } else { next() } } }) /** 更新客户端store，与服务端store同步 **/ // store.replaceState(window.__INITIAL_STATE__) if (window.__INITIAL_STATE__) { store.replaceState(window.__INITIAL_STATE__) } // actually mount to DOM router.onReady(() => { /** 挂载实例，客户端激活，所谓激活，指的是 Vue 在浏览器端接管由服务端发送的静态 HTML，使其变为由 Vue 管理的动态 DOM 的过程。注释掉app.$mount('#app') 可以清楚看到<div data-server-rendered="true"> 客户端通过data-server-rendered="true"知道该html是vue在服务端渲染的，并且不会在做多余的渲染。由于在服务端无法绑定事件，只有通过客户端vue处理。 **/ app.$mount('#app') })