Vue系列筆記之Vue核心思想
阿新 • • 發佈：2019-02-07
Vue和React對比
- 沒有和Angular進行對比的原因：Angular提供的更多是一整套解決方案，Vue和React更像是一個開放的生態，可以允許使用者最大化的定義、構建我們的專案，靈活開發
- Vue和React目前使用的都是Virtual Dom
Vue和React的一張對比圖表：
Speed Vue React Fastest 23ms 63ms Median 42ms 81ms Average 51ms 94ms 95th Perc 73ms 164ms Slowest 343ms 453ms 由此可見，Vue的效能要比React高很多，Vue和React雖然有很多相似之處，但也有不同的點。
Vue
- 模板和渲染函式的彈性選擇，我們構建一個模板，函式都是分離的，構建檔案非常優雅
- 簡單的語法及專案建立
- 更快的渲染速度和更小的體積
React
- 更適用於大型應用，可測試性更好
- 同時適用於Web端和原生App（React提供了React Native）
- 更大的生態圈帶來更多的支援和工具（React由Facebook官方提供，社群非常大）
相同點
- 都使用了虛擬Dom實現快速渲染
- 輕量級
- 響應式元件（比如在頁面上改變後元件也會實時發生變化）
- 都支援伺服器端渲染
- 易於整合路由工具，打包工具以及狀態管理工具
- 優秀的支援和社群
虛擬Dom: 傳統開發更多的是去操作Dom（文件物件模型），整個HTML/HTML5就是一個文件，通過js操作Dom改變節點、名字，改變節點的文字，這樣做非常耗資源，而虛擬Dom是在Js的記憶體裡邊構建一個類似Dom的一個物件，去模擬Dom，拼裝資料，拼裝完成後做一個整體的解析，渲染，一次性插入html Dom片段裡邊去，形成虛擬Dom，在記憶體裡邊操作是非常快的。
Vue核心思想
- Vue本身並不是一個框架
- Vue結合周邊生態構成一個靈活的、漸進式的框架
當我們去開發一個多頁面的應用程式的時候，可能我們僅僅需要Vue.js、Vue-resource或者axios這樣的請求外掛，這可能已經能滿足大部分的需求，當需要做一個大型的SPA的時候就需要路由外掛以及VUEX狀態管理、最終的打包構建，需要用什麼就加什麼。
漸進式框架包含：
- 宣告式渲染（Decrarative rendering）
- 元件系統（Component System）
- 客戶端路由（Client-Side Routing）
- 大規模狀態路由（Large Scale State Management）
- 構建工具（Build System）
核心思想：
- 資料驅動（傳統開發js和Dom是耦合的，需要在js裡邊大量的操作Dom,從長遠角度看這是非常好效能的，Vue js裡邊只是去調介面，查資料，查完資料把資料儲存到data裡邊，更多的是關注怎麼把資料存到data裡邊去，至於data裡面的變數怎麼跟Dom互動是另外一回事，只需要關注資料層面，不需要考慮怎麼改變Dom節點，怎麼替換文字，怎麼去迴圈，怎麼去新增class等等，資料構建好以後，模板就構建出來了）
元件化 （元件化思想跟RequireJs是不謀而合的，業務量不斷增加之後，一個js裡邊要實現太多的業務，團隊協作效率很低，把公共的部分抽離出來形成一個元件，這個元件可以巢狀在需要的地方）
通過MVVM的資料實現自動同步：
View: 即所謂的資料層、檢視層、HTML Dom。
ViewModel: 即Vue的例項化物件，通過new一個Vue的例項這個例項就是ViewModel。
Model: 即原生Js監聽物件，模型層，當用戶發生一個行為去修改某一個Dom元素之後，這個修改的行為會被ViewModel監聽，監聽到後會去修改模型層的資料，資料通過ViewModel的封裝來改變檢視。
雙向資料繫結？：
主要通過Object.defineProperty()函式實現
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模擬資料雙向繫結核心</title>
</head>
<body>
<input type="text" id="userName">
<br>
<span id="bindName"></span>
<script>
//宣告一個object物件
var obj = {};
//定義一個新的屬性(三個引數：物件，名稱，描述),在瀏覽器console輸入obj回車會自動觸發get，設定obj.userName="others.."會自動觸發set，相應檢視上也會發生變化。
Object.defineProperty(obj,"userName",{
get: function() {
console.log("get ...");
},
set: function(val) {
console.log("set ...");
document.getElementById("bindName").innerText = val;
document.getElementById("userName").value= val;
}
});
document.getElementById("userName").addEventListener("keyup",function(event){
obj.userName = event.target.value;
})
</script>
</body>
</html>