一、vue双向绑定原理

    vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

Object.defineProperty()这个方法：

var obj  = {};

Object.defineProperty(obj, 'name', {

        get: function() {

            console.log('我被获取了')

            return val;

        },

        set: function (newVal) {

            console.log('我被设置了')

        }

})

obj.name = 'fei';//在给obj设置name属性的时候，触发了set这个方法

var val = obj.name;//在得到obj的name属性，会触发get方法

    已经了解到vue是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，那么在设置或者获取的时候我们就可以在get或者set方法里假如其他的触发函数，达到监听数据变动的目的。

二、什么是 SSR

    SSR 的全称是 Server Side Rendering，对应的中文名是：服务器端渲染，顾名思义是将渲染的工作放在 Server 端进行。

      而与之对应的是 CSR ，客户端渲染，也就是目前 Web 应用中主流的渲染模式，一般由 Server 端返回的初始 HTML 页面，然后再由 JS 去异步加载数据，然后完成页面的渲染。

      SSR是后端模板渲染和单页面的组合。  SSR有两种模式，单页面和非单页面模式，第一种是后端首次渲染的单页面应用，第二种是完全使用后端路由的后端模版渲染模式。他们区别在于使用后端路由的程度。

vue ssr主要是解决以下两个问题：

1.seo

    SEO和爬虫都是根据url返回的数据来进行的，所以我们需要用户请求url的时候，返回的是有数据填充的的页面，spa应用查看网页源代码，也就是爬虫seo获取的数据，是一个没有数据的壳子，搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

2.首屏渲染

      更快的内容到达时间，像vue这样的单页面应用，首屏渲染是单页面spa的通病，打包出来的dist过大，会导致首屏加载缓慢。

3.应用场景：

      并不是所有的网站都需要SEO，比如企业内部网站，后天管理系统等。

      一些vue老项目，重构成本太大，首屏渲染可以通过路由懒加载，按需加载的方式，修改对应的问题，不全盘扳倒重写。

    在服务器返回结果之前，可以做处理判断是否是爬虫，来决定进行预渲染。

另一方面，不一定非要 100% SSR，渲染特定页面，甚至只渲染一个页面框架也是一个很好的选择。

4.同构的定义

在服务端渲染中，有两种页面渲染的方式：

      前端服务器通过请求后端服务器获取数据并组装HTML返回给浏览器，浏览器直接解析HTML后渲染页面

        浏览器在交互过程中，请求新的数据并动态更新渲染页面

      这两种渲染方式有一个不同点就是，一个是在服务端中组装html的，一个是在客户端中组装html的，运行环境是不一样的。所谓同构，就是让一份代码，既可以在服务端中执行，也可以在客户端中执行，并且执行的效果都是一样的，都是完成这个html的组装，正确的显示页面。也就是说，一份代码，既可以客户端渲染，也可以服务端渲染

5.同构的条件

    为了实现同构，首先思考一个应用中一个页面的组成，假如使用的是Vue.js，当我们打开一个页面时，首先是打开这个页面的URL，这个URL，可以通过应用的路由匹配，找到具体的页面，不同的页面有不同的视图，从应用的角度来看，视图 = 模板 + 数据，那么在 Vue.js 中， 模板可以理解成组件，数据可以理解为数据模型，即响应式数据。所以，对于同构应用来说，我们必须实现客户端与服务端的路由、模型组件、数据模型的共享。