从零开始搭建vue-ssr系列之三：服务器渲染的奥秘_Vue.js

发布时间：2019-05-14 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了从零开始搭建vue-ssr系列之三：服务器渲染的奥秘，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

Vue全家桶都是必要的吗？

当然不是，~~只有Vuex是必须的~~，实践发现，vuex也不是必须的，使用vuex可以很方便的管理前后端共享的数据。如果要不作用vuex，可以在created中使用如下方法来获取数据

let context = this.$ssrContext ? this.$ssrContext.state : window['__INITIAL_STATE__']

注：一定要在created里面使用，如果在mounted里面使用，Node端是不认识window对象，从而报错。

为什么必须要用到vuex？

即然数据在服务器端已经取到了，为什么还要共享到前端？

这就涉及到ssr渲染的奥秘了，按理说，服务端把数据取到之后，渲染成HTML返回到前端，这样前端就用不到这些数据了，取数据只为了渲染，这种情况只适用于纯静态的渲染，就是拿到10条数据，渲染成一个列表，这个列表上没有交互，没有click、hover等效果，但是一些有click事件，就像例子上面那样，点击每个item，都会弹出title，这些是需要js来做的，但是vue-ssr不能绑定javascript事件，只能是HTML+CSS，也就是说服务器端使用vue-ssr渲染出来的返回到浏览器的也只能是HTML+CSS。再强调一次：vue-ssr渲染出来只是HTML+CSS的字符串，绑定事件需要在浏览器端来做，前端需要数据和已经渲染好的DOM做比对，从而添加上各种事件！

那事件怎么办？

这就回到了第一个问题，为什么前端也需要数据，既然服务器不能增加事件，那只能前端增加喽。vue-ssr有一个比较关键的地方就是，前后必须共用同一套vue文件，也就是说一个.vue文件，前端也要用，后端也要用，为什么要这样做，大家想过没有？答案：就是后端从vuex里面取到数据之后，对<template>里面的HTML使用vue的语法进渲染，最终渲染成真正的HTML，对<style>里面的内容，使用loader，抽取成css，所以服务端渲染的成果是HTML+CSS；前端也是从vuex里面取到数据，前端的渲染主要做2件事，1.拿到数据，使用virtual-dom进行预渲染，然后和服务端渲染出来的进行比对，比对两边渲染的内容是不是一致的；2.对DOM元素的事件进行绑定，也就是回答的问题，事件在这块进行的处理。

一点小建议: 多多理解原理, 多多实践

我想只有理解了原理性的东西，再看代码，再看流程，才能理解是为什么要这么搞，因为这些东西官方文档上面说的也不是很清楚，网上的例子也不少，但是很少提这块，刚开始我拿到各种例子之后，也很蒙，这写的都是啥！啥！啥！尤其是官方给的例子，根本就没有头绪。现在理清了，分享给大家，希望有帮忙，下一篇我们来看下代码实现。