當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue.js 概述与 MVVM 模式

發(fā)布時間：2025/3/11 vue 18 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue.js 概述与 MVVM 模式小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1. Vue.js 是什么

Vue.js 是一個輕巧、高性能、可組件化的 MVVM 庫，擁有非常容易上手的 API；
Vue.js是一個構(gòu)建數(shù)據(jù)驅(qū)動的 Web 界面的庫。

2. Vue.js 的特性

1. 輕量級的框架
2. 雙向數(shù)據(jù)綁定
3. 指令
4. 插件化（組件化）

3. MVVM 框架

MVVM（Model-View-ViewModel）是對 MVC（Model-View-Control）和 MVP（Model-View-Presenter）的進一步改進。

『View』：視圖層（UI 用戶界面）
『ViewModel』：業(yè)務(wù)邏輯層（一切 js 可視為業(yè)務(wù)邏輯）
『Model』：數(shù)據(jù)層（存儲數(shù)據(jù)及對數(shù)據(jù)的處理如增刪改查）

MVVM 將數(shù)據(jù)雙向綁定（data-binding）作為核心思想，View 和 Model 之間沒有聯(lián)系，它們通過 ViewModel 這個橋梁進行交互。
Model 和 ViewModel 之間的交互是雙向的，因此 View 的變化會自動同步到 Model，而 Model 的變化也會立即反映到 View 上顯示。
當用戶操作 View，ViewModel 感知到變化，然后通知 Model 發(fā)生相應(yīng)改變；反之當 Model 發(fā)生改變，ViewModel 也能感知到變化，使 View 作出相應(yīng)更新。

4. Vue 的開發(fā)模式

5. Vue.js 的優(yōu)點

1. 簡述 MVVM

MVVM 是 Model-View-ViewModel 的縮寫。MVVM 是一種設(shè)計思想。Model 層代表數(shù)據(jù)模型，也可以在 Model 中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯；View 代表 UI 組件，它負責將數(shù)據(jù)模型轉(zhuǎn)化成 UI 展現(xiàn)出來，ViewModel 是一個同步 View 和 Model 的對象。
在 MVVM 架構(gòu)下，View 和 Model 之間并沒有直接的聯(lián)系，而是通過 ViewModel 進行交互，Model 和 ViewModel 之間的交互是雙向的，因此 View 數(shù)據(jù)的變化會同步到 Model 中，而 Model 數(shù)據(jù)的變化也會立即反應(yīng)到 View 上。
ViewModel 通過雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來，而View 和 Model 之間的同步工作完全是自動的，無需人為干涉，因此開發(fā)者只需關(guān)注業(yè)務(wù)邏輯，不需要手動操作DOM, 不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問題，復(fù)雜的數(shù)據(jù)狀態(tài)維護完全由 MVVM 來統(tǒng)一管理。

2. 簡述 Vue.js 的優(yōu)點

低耦合。視圖（View）可以獨立于 Model 變化和修改，一個 ViewModel 可以綁定到不同的 "View" 上，當 View 變化的時候 Model 可以不變，當 Model 變化的時候 View 也可以不變。
可重用性。你可以把一些視圖邏輯放在一個 ViewModel 里面，讓很多 View 重用這段視圖邏輯。
獨立開發(fā)。開發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)（ViewModel），設(shè)計人員可以專注于頁面設(shè)計。
方便測試。界面素來是比較難于測試的，開發(fā)中大部分 Bug 來至于邏輯處理，由于 ViewModel 分離了許多邏輯，可以對 ViewModel 構(gòu)造單元測試。
易用靈活高效。

以上是生活随笔為你收集整理的Vue.js 概述与 MVVM 模式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。