Vue學習之路之框架對比
阿新 • • 發佈：2018-12-22
vue框架對比
Vue和React對比
原因
- Angular提供的更多是一整套解決方案，而vue更像一個生態。
- Vue和React目前都是用了Virtual Dom（虛擬節點）
速度對比
| 速度 | vue | react |
|---|---|---|
| 最快 | 23ms | 63ms |
| 中值 | 42ms | 81ms |
| 平均 | 51ms | 94ms |
| 95th Prec | 73ms | 164ms |
| 最慢 | 343ms | 453ms |
不同點
vue
- 模板和渲染函式的彈性選擇
- 簡單的語法及專案建立
- 更快的渲染速度和更小的體積
React
- 更適用於大型應用和更好的可測試性
- 同時適用於Web端和原生App
- 更大的生態圈帶來的更多支援和工具
相同點
- 利用虛擬DOM實現快速渲染
- 輕量級
- 響應式元件
- 伺服器端渲染
- 易於整合路由工具，打包工具以及狀態管理工具
- 優秀的支援和社群
Vue概況以及核心思想
概況
- Vue本身並不是一個框架
- Vue結合周邊生態構成一個靈活的、漸進式的框架
宣告式渲染——>元件系統——>客戶端路由——>大規模狀態管理——>構建工具
核心思想
-
資料驅動
-
元件化
-
通過MVVM的資料繫結實現自動同步
-
Vue元件化
-
元件樹
-
Vue實現雙向資料繫結的原理
使用Obeject.defineProperty（）方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="text" id="a"> <span id="b"></span> <script> var obj ={}; Object.defineProperty(obj,'hello',{ set:function(newVal){ document.getElementById('a').value = newVal; document.getElementById('b').innerHTML = newVal; console.log(newVal) } }); document.addEventListener('keyup',function(e){ obj.hello =e.target.value; }) </script> </body> </html>