1. SSR
VUEJS可以将一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。... 参考官方文档： 官网
2. vue-ssr一直在强调数据污染问题 数据污染
理解
// 第 1 步：创建一个 Vue 实例
const Vue = require('vue')
const server = require('express')()
// 第 2 步：创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer()
const app = new Vue({
template: `<div>Hello World我是{{myName}}年龄{{myage}} 测试d {{d}} 测试e {{e}}</div>`,
data: {
myName: 'wzq',
myage: 18,
d: 0,
e: 1
}
})
server.get('*', (req, res) => {
console.log(req.url);
if (req.url === '/111') {
app.d = 123
}
if (req.url === '/222') {
app.e = 456
}
// 第 3 步：将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {
if (err) throw err
res.writeHead(200, {
"Content-Type": 'text/html;charset=utf-8'
})
// console.log(html)
// => <div data-server-rendered="true">Hello World</div>
res.end(`
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>${html}</body>
</html>
`)
})
})
server.listen(8080)
github代码地址访问
当我们在访问
http://localhost:8080/111
http://localhost:8080/222
http://localhost:8080/
最终会发现在不停的刷新之后得到一样的结果 这显然不是我们想要的结果 产生的原因是因为每次请求都用的相同的Vue实例 返回的也是相同的vue实例 所以最终结果相同
因此在每次请求 我们都new Vue实例 才会不造成数据污染问题
