一、vue雙向綁定原理

? ? vue.js 則是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式鳞芙，通過Object.defineProperty()來劫持各個屬性的setter眷柔，getter期虾，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)驯嘱。

Object.defineProperty()這個方法：

var obj? = {};

Object.defineProperty(obj, 'name', {

? ? ? ? get: function() {

? ? ? ? ? ? console.log('我被獲取了')

? ? ? ? ? ? return val;

? ? ? ? },

? ? ? ? set: function (newVal) {

? ? ? ? ? ? console.log('我被設(shè)置了')

? ? ? ? }

})

obj.name = 'fei';//在給obj設(shè)置name屬性的時候镶苞，觸發(fā)了set這個方法

var val = obj.name;//在得到obj的name屬性，會觸發(fā)get方法

? ? 已經(jīng)了解到vue是通過數(shù)據(jù)劫持的方式來做數(shù)據(jù)綁定的鞠评，其中最核心的方法便是通過Object.defineProperty()來實(shí)現(xiàn)對屬性的劫持茂蚓，那么在設(shè)置或者獲取的時候我們就可以在get或者set方法里假如其他的觸發(fā)函數(shù)，達(dá)到監(jiān)聽數(shù)據(jù)變動的目的剃幌。

二聋涨、什么是 SSR

? ? SSR 的全稱是 Server Side Rendering，對應(yīng)的中文名是：服務(wù)器端渲染负乡，顧名思義是將渲染的工作放在 Server 端進(jìn)行牍白。

? ? ? 而與之對應(yīng)的是 CSR ，客戶端渲染敬鬓，也就是目前 Web 應(yīng)用中主流的渲染模式淹朋，一般由 Server 端返回的初始 HTML 頁面，然后再由 JS 去異步加載數(shù)據(jù)钉答，然后完成頁面的渲染础芍。

? ? ? SSR是后端模板渲染和單頁面的組合。? SSR有兩種模式数尿，單頁面和非單頁面模式仑性，第一種是后端首次渲染的單頁面應(yīng)用，第二種是完全使用后端路由的后端模版渲染模式右蹦。他們區(qū)別在于使用后端路由的程度诊杆。

vue ssr主要是解決以下兩個問題：

1.seo

? ? SEO和爬蟲都是根據(jù)url返回的數(shù)據(jù)來進(jìn)行的，所以我們需要用戶請求url的時候何陆，返回的是有數(shù)據(jù)填充的的頁面晨汹，spa應(yīng)用查看網(wǎng)頁源代碼，也就是爬蟲seo獲取的數(shù)據(jù)贷盲，是一個沒有數(shù)據(jù)的殼子淘这，搜索引擎爬蟲抓取工具可以直接查看完全渲染的頁面。

2.首屏渲染

? ? ? 更快的內(nèi)容到達(dá)時間巩剖，像vue這樣的單頁面應(yīng)用铝穷，首屏渲染是單頁面spa的通病，打包出來的dist過大佳魔，會導(dǎo)致首屏加載緩慢曙聂。

3.應(yīng)用場景：

? ? ? 并不是所有的網(wǎng)站都需要SEO，比如企業(yè)內(nèi)部網(wǎng)站鞠鲜，后天管理系統(tǒng)等宁脊。

? ? ? 一些vue老項(xiàng)目断国，重構(gòu)成本太大，首屏渲染可以通過路由懶加載朦佩，按需加載的方式并思，修改對應(yīng)的問題，不全盤扳倒重寫语稠。

? ? 在服務(wù)器返回結(jié)果之前宋彼，可以做處理判斷是否是爬蟲，來決定進(jìn)行預(yù)渲染仙畦。

另一方面输涕，不一定非要 100% SSR，渲染特定頁面慨畸，甚至只渲染一個頁面框架也是一個很好的選擇莱坎。

4.同構(gòu)的定義

在服務(wù)端渲染中，有兩種頁面渲染的方式：

? ? ? 前端服務(wù)器通過請求后端服務(wù)器獲取數(shù)據(jù)并組裝HTML返回給瀏覽器寸士，瀏覽器直接解析HTML后渲染頁面

? ? ? ? 瀏覽器在交互過程中檐什，請求新的數(shù)據(jù)并動態(tài)更新渲染頁面

? ? ? 這兩種渲染方式有一個不同點(diǎn)就是，一個是在服務(wù)端中組裝html的弱卡，一個是在客戶端中組裝html的乃正，運(yùn)行環(huán)境是不一樣的。所謂同構(gòu)婶博，就是讓一份代碼瓮具，既可以在服務(wù)端中執(zhí)行，也可以在客戶端中執(zhí)行凡人，并且執(zhí)行的效果都是一樣的名党，都是完成這個html的組裝，正確的顯示頁面挠轴。也就是說传睹，一份代碼，既可以客戶端渲染岸晦，也可以服務(wù)端渲染

5.同構(gòu)的條件

? ? 為了實(shí)現(xiàn)同構(gòu)欧啤，首先思考一個應(yīng)用中一個頁面的組成，假如使用的是Vue.js委煤，當(dāng)我們打開一個頁面時堂油，首先是打開這個頁面的URL修档，這個URL碧绞，可以通過應(yīng)用的路由匹配，找到具體的頁面吱窝，不同的頁面有不同的視圖讥邻，從應(yīng)用的角度來看迫靖，視圖 = 模板 + 數(shù)據(jù)跪解，那么在 Vue.js 中背桐， 模板可以理解成組件，數(shù)據(jù)可以理解為數(shù)據(jù)模型霎冯，即響應(yīng)式數(shù)據(jù)发魄。所以盹牧，對于同構(gòu)應(yīng)用來說，我們必須實(shí)現(xiàn)客戶端與服務(wù)端的路由励幼、模型組件汰寓、數(shù)據(jù)模型的共享。