vue项目改造SSR（服务端渲染）

缺点：1、SEO问题

2、首屏速度问题

3、消耗性能的问题

优点：

1、更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面

2、首屏渲染速度快

SSR 简单来说就是将页面在服务端渲染完成后在客户端直接展示。

index.template.html

server.js

vue项目是通过虚拟 DOM来挂载到html的，所以对spa项目，爬虫才会只看到初始结构。虚拟 DOM，最终要通过一定的方法将其转换为真实 DOM。虚拟 DOM 也就是 JS 对象，整个服务端的渲染流程就是通过虚拟 DOM 的编译成完整的html来完成的。

需要通过Webpack打包生成两份bundle文件：

Client Bundle，给浏览器用。和纯Vue前端项目Bundle类似

Server Bundle，供服务端SSR使用，一个json文件

不管项目先前是什么样子，是否是使用vue-cli生成的。都会有这个构建改造过程。在构建改造这里会用到 vue-server-renderer 库，这里要注意的是 vue-server-renderer 版本要与Vue版本一样。

打包之后目录结构

vue.config.js

index.template.html

打包成客户端和服务器端

启动node服务

github地址： https://github.com/wang12321/SSR

我们从最简单的new Vue开始：

1、new Vue，执行初始化

2、挂载$mount方法，通过自定义Render方法、template、el等生成Render函数

3、通过Watcher监听数据的变化

4、当数据发生变化时，Render函数执行生成VNode对象

5、通过patch方法，对比新旧VNode对象，通过DOM Diff算法，添加、修改、删除真正的DOM元素

至此，整个new Vue的渲染过程完毕。

1、把模板编译为render函数

2、实例进行挂载, 根据根节点render函数的调用，递归的生成虚拟dom

3、对比虚拟dom，渲染到真实dom

4、组件内部data发生变化，组件和子组件引用data作为props重新调用render函数，生成虚拟dom, 返回到步骤3

详见链接： https://segmentfault.com/a/1190000018495383

就我目前所知道的渲染方式有  

1.插值表达式

2.v-text

3.v-html

但是使用插值表达式会有一些问题  即插值闪烁

所谓的插值闪烁 就是数据不是预先订好的  而是后期通过网络或者其他方式获取的  存在一定时间的延迟  等待数据准备完毕后才会进行渲染  而在这段空档期   就会显示出插值表达式 即页面中会显示如下的情况

v-text也是负责将数据渲染到页面中去的  使用 v-text 可以完美解决插值闪烁问题   但是 v-text 也不是完美的  v-text 不能识别 标签 （例如 <p></p>, <a></a>等HTML中的标签）它会将标签一并写入   v-text 只能渲染纯文本的数据

页面结果如下：

v-html 也是负责将数据渲染到页面中去的  使用 v-html 可以完美解决插值闪烁问题  v-html 不会有识别不了页面标签的情况  v-html是既可以识别文本  又可以识别标签

页面结果如下：

v- if  v-else   v-else-if    都与JavaScript 中的if  else  else if   一样

执行结果如下：

当 a1 为true 时  则是显示  “我是数据一”     

v- if  v-else   v-else-if    只会执行其中一个满足条件的

运行结果如下：

1.v-if  

在条件成立的时候  会创建一个标签即里面的内容    如果条件不成立的时候  那么则会销毁这个标签   在页面中的 （检查 F12    元素 ）也是不存在的

v-if  只会在条件成立时创建

2.v-show

在条件成立的时候  标签会显示出来   不成立的时候 会隐藏起来   v-show 的显示与隐藏都是通过 css 属性设置的  而且在页面中的 （检查 F12    元素 ）也是存在的

v-show 一开始就创建   但判断条件是否满足 来显示与隐藏

---