前言
接着上一篇文章vue 2.0服务端渲染从零开始(一)，本篇主要介绍如何编写通用代码。
编写通用代码
编写通用代码时的约束条件：即运行在服务器和客户端的代码，由于用例和平台API的差异，当运行在不同环境中时，我们的代码将不会完全相同。
在Vue.js 服务器端渲染指南--编写通用代码中详细的介绍了需要注意的几个方面：
- 服务器上的数据响应
- 独立的应用程序实例
- 禁用数据响应
- 组件生命周期钩子函数
- 只有
beforeCreate和create会在服务端渲染(SSR)过程中被调用。 - 副作用代码移动到
beforeMount或mounted生命周期中。
- 只有
- 访问特定平台API
- 仅浏览器可用的全局变量
window或document，在纯客户端的生命周期钩子函数中惰性访问它们。 - 尽可能使用通用API，例如axios可以向服务器和客户端都暴露相同的API
- 仅浏览器可用的全局变量
- 自定义指令
- 推荐使用组件作为抽象机制，并运行在「虚拟 DOM 层级(Virtual-DOM level)」(例如使用渲染函数
render function) - 如果自定义指令不是很容易替换为组件，则可以在创建服务器renderer时，使用
directives选项提供的"服务器端版本"
- 推荐使用组件作为抽象机制，并运行在「虚拟 DOM 层级(Virtual-DOM level)」(例如使用渲染函数
避免状态单例
同样是单例对象(vue实例)，在纯客户端代码时，vue实例在组件创建是生成，在组件销毁后跟着从内存中清除。
但是Node.js服务器是一个长期运行的进程。创建的vue实例将一直留存在内存中，导致它被每个传入的请求共享，这样很容易导致交叉请求状态污染。
因此，我们不应该直接创建一个应用程序实例，而是应该暴露一个可以重复执行的工厂函数，为每个请求创建新的应用程序实例。
之前基本示例中的写法(直接创建)：
const app = new Vue({
data: {
url: req.url
},
template: '<div>访问的url是{{url}}</div>'
});
工厂模式：
app.js
const Vue = require('vue')
module.exports = function createApp (context) {
return new Vue({
data: {
url: context.url
},
template: '<div>访问的 URL 是：{{ url }}</div>'
})
}
server.js
const createApp = require('./app')
const app = createApp(context)
完整示例
戳我
请注意分支：dev_2分支
result.png
