認識Vue

一、vue是什么

Vue.js（/vju?/，或簡稱為Vue）是一個用于創建用戶界面的開源JavaScript框架，也是一個創建單頁應用的Web應用框架。2016年一項針對JavaScript的調查表明，Vue有著89%的開發者滿意度。在GitHub上，該項目平均每天能收獲95顆星，為Github有史以來星標數第3多的項目同時也是一款流行的JavaScript前端框架，旨在更好地組織與簡化Web開發。Vue所關注的核心是MVC模式中的視圖層，同時，它也能方便地獲取數據更新，并通過組件內部特定的方法實現視圖與模型的交互PS: Vue作者尤雨溪是在為AngularJS工作之后開發出了這一框架。他聲稱自己的思路是提取Angular中為自己所喜歡的部分，構建出一款相當輕量的框架最早發布于2014年2月

二、Vue核心特性

數據驅動（MVVM)

MVVM`表示的是 `Model-View-ViewModel

• Model：模型層，負責處理業務邏輯以及和服務器端進行交互
• View：視圖層：負責將數據模型轉化為UI展示出來，可以簡單的理解為HTML頁面
• ViewModel：視圖模型層，用來連接Model和View，是Model和View之間的通信橋梁

組件化

1.什么是組件化一句話來說就是把圖形、非圖形的各種邏輯均抽象為一個統一的概念（組件）來實現開發的模式，在Vue中每一個.vue文件都可以視為一個組件2.組件化的優勢

• 降低整個系統的耦合度，在保持接口不變的情況下，我們可以替換不同的組件快速完成需求，例如輸入框，可以替換為日歷、時間、范圍等組件作具體的實現
• 調試方便，由于整個系統是通過組件組合起來的，在出現問題的時候，可以用排除法直接移除組件，或者根據報錯的組件快速定位問題，之所以能夠快速定位，是因為每個組件之間低耦合，職責單一，所以邏輯會比分析整個系統要簡單
• 提高可維護性，由于每個組件的職責單一，并且組件在系統中是被復用的，所以對代碼進行優化可獲得系統的整體升級

指令系統

解釋：指令 (Directives) 是帶有 v- 前綴的特殊屬性作用：當表達式的值改變時，將其產生的連帶影響，響應式地作用于 DOM

• 常用的指令
  • 條件渲染指令 v-if
  • 列表渲染指令v-for
  • 屬性綁定指令v-bind
  • 事件綁定指令v-on
  • 雙向數據綁定指令v-model

沒有指令之前我們是怎么做的？是不是先要獲取到DOM然后在…干點啥

三、Vue跟傳統開發的區別

1. 開發模式：MVVM vs 模板驅動

• Vue：
  采用 ??MVVM 模式??（Model-View-ViewModel），通過數據驅動視圖。
  • 數據綁定：雙向綁定（v-model）自動同步數據和視圖。
  • 響應式系統：數據變化自動觸發視圖更新，無需手動操作 DOM。
  • 虛擬 DOM：高效更新真實 DOM，減少性能損耗。
• 傳統開發：
  通常采用 ??MVC 模式??或直接操作 DOM：
  • 手動 DOM 操作：通過 document.getElementById 或 jQuery 直接修改 DOM。
  • 事件驅動：需手動綁定事件監聽器（如 onclick）。
  • 數據與視圖分離：數據更新后需手動刷新頁面或局部 DOM。

---

2. 組件化開發

• Vue：
  • 組件化架構：將 UI 拆分為獨立組件（.vue 文件），每個組件包含模板、邏輯、樣式。
  • 單文件組件：代碼結構清晰，支持作用域 CSS（scoped）。
  • 復用性：組件可跨項目復用，支持 Props 和 Events 通信。
• 傳統開發：
  • 代碼分散：HTML、CSS、JavaScript 分離，復用困難。
  • 全局污染：傳統 jQuery 插件易導致變量命名沖突。
  • 組件化弱：需依賴第三方庫（如 Bootstrap）實現組件化。

---

3. 狀態管理

• Vue：
  • Vuex/Pinia：集中式狀態管理，適合復雜應用。
  • 響應式數據：狀態變化自動同步到視圖。
  • 模塊化：支持拆分模塊管理大型狀態。
• 傳統開發：
  • 全局變量：依賴 window 對象或單例模式管理狀態。
  • 事件廣播：通過 jQuery.trigger 或自定義事件傳遞數據。
  • 維護困難：狀態分散，調試復雜。

---

4. 路由管理

• Vue：
  • Vue Router：聲明式路由，支持動態路由、嵌套路由、懶加載。
  • SPA 體驗：單頁面應用，頁面切換無刷新，用戶體驗流暢。
• 傳統開發：
  • 多頁面應用（MPA）：每次跳轉需重新加載頁面。
  • 哈希路由：通過 window.location.hash 模擬路由，體驗較差。
  • 后端路由依賴：需后端配合返回不同 HTML 頁面。

---

5. 構建與工程化

• Vue：
  • 現代化工具鏈：支持 Vue CLI、Vite 等，提供模塊化、熱更新、代碼分割。
  • TypeScript 支持：原生兼容 TypeScript，強類型提升代碼質量。
  • 生態豐富：Vue DevTools、Vuetify 等工具和組件庫。
• 傳統開發：
  • 構建簡單：依賴 Webpack 基礎配置或無構建工具。
  • 模塊化有限：需手動實現 AMD/CommonJS 模塊化。
  • 調試困難：無虛擬 DOM，需手動跟蹤 DOM 變化。

---

6. 性能優化

• Vue：
  • 虛擬 DOM：批量更新 DOM，減少重繪和回流。
  • 異步組件：按需加載組件，優化首屏性能。
  • Tree Shaking：現代打包工具支持按需引入代碼。
• 傳統開發：
  • 頻繁 DOM 操作：直接操作真實 DOM，性能瓶頸明顯。
  • 無優化手段：依賴開發者手動優化（如緩存 DOM 查詢）。

---

7. 學習曲線

• Vue：
  • 結構化學習：官方文檔完善，提供 CLI 工具快速上手。
  • 漸進式框架：可逐步學習 Composition API、Vuex 等高級特性。
• 傳統開發：
  • 底層知識要求：需熟悉 DOM、事件循環、AJAX 等。
  • 兼容性問題：需處理瀏覽器兼容性（如 IE）。

---

8. 適用場景

• Vue：
  • 復雜單頁面應用（SPA）。
  • 需要快速迭代和維護的中大型項目。
  • 強調開發效率和代碼可維護性的團隊。
• 傳統開發：
  • 簡單靜態頁面或小型項目。
  • 需要直接操作 DOM 的特殊場景（如游戲、復雜動畫）。
  • 后端渲染模板（如 Django/Jinja2）。

---

總結

維度	Vue	傳統開發
架構	MVVM + 組件化	MVC/MVP + 分散代碼
數據綁定	雙向綁定，響應式	手動操作 DOM
性能	虛擬 DOM 優化	直接操作真實 DOM
工程化	現代化工具鏈，TypeScript 支持	依賴 Webpack 基礎配置
適用場景	中大型 SPA，復雜交互	簡單頁面，靜態內容

選擇建議：

• 若項目復雜度高、需長期維護，Vue 的組件化、狀態管理和工程化能力顯著提升效率。
• 若為簡單頁面或需直接操作 DOM（如游戲），傳統開發可能更直接。

總結就是：

• Vue所有的界面事件，都是只去操作數據的，Jquery操作DOM
• Vue所有界面的變動，都是根據數據自動綁定出來的，Jquery操作DOM

四、Vue和React對比

Vue 和 React 是當前最流行的兩大前端框架，它們在設計理念、開發模式、生態系統等方面有顯著差異。以下是兩者的詳細對比：

---

1. 核心設計理念

維度	Vue	React
核心思想	漸進式框架，強調“漸進式增強”	專注于視圖層，倡導“組合式開發”
數據綁定	雙向綁定（v-model）	單向數據流（通過 props 傳遞）
模板語法	基于 HTML 的模板，類似原生 JS	JSX（JavaScript + XML 混合語法）
響應式原理	基于 Object.defineProperty	基于 Proxy（React 18+）

---

2. 開發模式

維度	Vue	React
組件化	單文件組件（.vue 文件）	函數組件/類組件（JS/TS 文件）
狀態管理	Vuex（官方狀態管理庫）	Redux/MobX/Recoil（第三方庫）
路由管理	Vue Router（官方路由庫）	React Router（第三方庫）
構建工具	Vue CLI / Vite	Create React App / Vite

---

3. 生態系統

維度	Vue	React
社區生態	官方維護完善（如 Pinia、Vuetify）	龐大的第三方庫（Redux、React Router、Next.js）
學習資源	中文文檔友好，適合新手	英文資源豐富，學習曲線較陡峭
企業應用	國內企業使用較多（如阿里、騰訊）	全球范圍內廣泛應用（如 Meta、Netflix）

---

4. 性能優化

維度	Vue	React
虛擬 DOM	自動優化，差異算法高效	手動優化（React.memo、useMemo）
服務端渲染	Nuxt.js（官方 SSR 框架）	Next.js（官方 SSR 框架）
Tree Shaking	支持（Vue 3）	支持（React 18+）

---

5. 學習曲線

維度	Vue	React
入門難度	低（模板語法直觀）	中高（需掌握 JSX、Hooks 等概念）
靈活性	配置較少，約定優于配置	高度靈活，需自行決策架構
TypeScript	原生支持良好	官方推薦，生態完善

---

6. 典型應用場景

場景	Vue	React
快速開發	適合中小型項目，快速迭代	適合復雜大型項目，需長期維護
企業級應用	國內企業（如阿里云控制臺）	全球企業（如 Meta、Instagram）
跨平臺開發	Uni-app（Vue 生態）	React Native（React 生態）

---

7. 代碼示例對比

計數器實現

Vue：

<template><button @click="count++">{{ count }}</button>
</template><script setup>
let count = ref(0);
</script>

React：

import { useState } from 'react';function Counter() {const [count, setCount] = useState(0);return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

---

總結與選擇建議

框架	優勢	劣勢	推薦場景
Vue	學習成本低，文檔友好，適合快速開發	生態相對較小，國際化不足	中小型項目、國內企業、偏好模板語法
React	社區龐大，生態完善，靈活性強	學習曲線陡峭，需手動優化性能	大型復雜項目、全球化應用、偏好函數式編程

選擇建議：

• 選 Vue：快速上手、追求開發效率、團隊偏好 HTML 模板語法。
• 選 React：長期維護、需要高度靈活性、項目依賴豐富第三方庫（如 Next.js）。

相同點

• 都有組件化思想
• 都支持服務器端渲染
• 都有Virtual DOM（虛擬dom）
• 數據驅動視圖
• 都有支持native的方案：Vue的weex、React的React native
• 都有自己的構建工具：Vue的vue-cli、React的Create React App

區別

• 數據流向的不同。react從誕生開始就推崇單向數據流，而Vue是雙向數據流
• 數據變化的實現原理不同。react使用的是不可變數據，而Vue使用的是可變的數據
• 組件化通信的不同。react中我們通過使用回調函數來進行通信的，而Vue中子組件向父組件傳遞消息有兩種方式：事件和回調函數
• diff算法不同。react主要使用diff隊列保存需要更新哪些DOM，得到patch樹，再統一操作批量更新DOM。Vue 使用雙向指針，邊對比，邊更新DOM