搜尋
首頁web前端前端問答vue中mvvm和mvc的差別有哪些
vue中mvvm和mvc的差別有哪些Dec 27, 2022 pm 05:59 PM
vuemvcmvvm

mvvm和mvc的差別:1、mvvm各部分的通訊是雙向的,而mvc各部分通訊是單向的。 2.MVVM實作了view與model的自動同步,也就是model屬性改變時,不需要手動操作dom元素去改變view的顯示,而是改變屬性後該屬性對應的view層會自動改變。

vue中mvvm和mvc的差別有哪些

本教學操作環境:windows7系統、vue3版,DELL G3電腦。

MVC是什麼


#MVC是設計模式:

#M(Model):模型層。 是應用程式中用來處理應用程式資料邏輯的部分,模型物件負責在資料庫中存取資料;
#V(View):視圖層。 是應用程式中處理資料顯示的部分,視圖是依據模型資料所建立的;
C(Controller):控制層。 是應用程式中處理使用者互動的部分,控制器接受使用者的輸入並呼叫模型和視圖去完成使用者的需求,控制器本身不輸出任何東西和做任何處理。它只是接收請求並決定呼叫哪個模型構件去處理請求,然後再確定用哪個視圖來顯示傳回的資料。

vue中mvvm和mvc的差別有哪些

vue中mvvm和mvc的差別有哪些

#MVVM是什麼


vue框架中MVVM的M就是後端的數據,V就是節點樹,VM就是new出來的那個Vue({})物件

M(Model):模型層。 就是業務邏輯相關的資料對象,通常從資料庫映射而來,我們可以說是與資料庫對應的model。
V(View):視圖層。 就是展現出來的使用者介面。
VM(ViewModel):視圖模型層。 連接view和model的橋樑。因為,Model層中的資料往往是不能直接跟View中的控制項一一對應上的,所以,需要再定義一個資料物件專門對應view上的控制項。而ViewModel的職責就是把model物件封裝成可以顯示和接受輸入的介面資料物件。

vue中mvvm和mvc的差別有哪些

 View與ViewModel之間透過雙向綁定建立聯繫,這樣當View(視圖層)變化時,會自動更新到ViewModel(視圖模型),反之亦然。

vue中mvvm和mvc的差別有哪些

#MVVM的優點

1、mvc和mvvm都是一種設計想法。主要就是mvc中Controller演變成mvvm中的viewModel。 mvvm主要解決了mvc中大量DOM操作使頁面渲染效能降低,載入速度變慢的問題 。

2、MVVM與MVC最大的差別就是:它實作了View與Model的自動同步:當Model的屬性改變時,我們就不用再自己手動操作Dom元素來改變View的顯示,它會自動變化。

3、整體看來,MVVM比MVC精簡很多,我們不用再用選擇器頻繁地操作DOM。

MVVM並不是用VM完全取代了C,ViewModel存在目的在於抽離Controller中展示的業務邏輯,而不是替代Controller,其它視圖操作業務等還是應該放在Controller中實作

MVC與MVVM有什麼不同


#區別一:

##mvvm各部分的通信是雙向的,而mvc各部分通訊是單向的。

區別二:

MVVM 與MVC 最大的差異就是:它實作了View與Model的自動同步

  • 當Model屬性改變時,不用手動操作Dom元素去改變View的顯示。

  • 而改變屬性後,該屬性對應View的顯示會自動改變

MVVM響應式原則


  • vue是採用資料劫持配合發布者-訂閱者的模式的方式,
    • 透過Object.defineProperty()來劫持各個屬性的getter和setter
    • #在資料變動時,發布訊息給依賴收集器(dep中的subs),去通知(notify)觀察者,做出對應的回調函數,更新視圖
  • MVVM作為綁定的入口,整合Observer,Compile和Watcher三者,
    • 透過Observer來監聽model資料變化,
    • 透過Compile來解析編譯範本指令,
    • 最終利用Watcher搭起Observer,Compile之間的通訊橋路,
    • 達到資料變化Observer)=>視圖更新;視圖互動變化=>資料model變更的雙向綁定效果。

【相關推薦:vuejs影片教學web前端開發

以上是vue中mvvm和mvc的差別有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
PHP实现MVVM架构:基本原理及应用PHP实现MVVM架构:基本原理及应用Jun 18, 2023 am 08:54 AM

随着Web应用程序的快速发展,越来越多的开发者将目光投向了各种新兴的Web开发框架和架构设计模式。其中一个备受瞩目的设计模式就是MVVM(ModelViewViewModel)架构模式。MVVM采用了一种现代化的设计模式,通过将UI和业务逻辑相分离,使得开发人员能够更好地管理和维护应用程序。此外,MVVM减少了不必要的耦合,提高了代码的可重用性和灵活性,

PHP MVC 架构:构建面向未来的 Web 应用程序PHP MVC 架构:构建面向未来的 Web 应用程序Mar 03, 2024 am 09:01 AM

引言在当今快速发展的数字世界中,构建健壮、灵活且可维护的WEB应用程序至关重要。PHPmvc架构提供了实现这一目标的理想解决方案。MVC(模型-视图-控制器)是一种广泛使用的设计模式,可以将应用程序的各个方面分离为独立的组件。MVC架构的基础MVC架构的核心原理是分离关注点:模型:封装应用程序的数据和业务逻辑。视图:负责呈现数据并处理用户交互。控制器:协调模型和视图之间的交互,管理用户请求和业务逻辑。PHPMVC架构phpMVC架构遵循传统MVC模式,但也引入了语言特定的功能。以下是PHPMVC

react与vue的虚拟dom有什么区别react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AM

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。

VSCode插件分享:一个实时预览Vue/React组件的插件VSCode插件分享:一个实时预览Vue/React组件的插件Mar 17, 2022 pm 08:07 PM

在VSCode中开发Vue/React组件时,怎么实时预览组件?本篇文章就给大家分享一个VSCode 中实时预览Vue/React组件的插件,希望对大家有所帮助!

手把手带你使用Vue + Laravel开发一个简单的 CRUD 应用手把手带你使用Vue + Laravel开发一个简单的 CRUD 应用Apr 15, 2022 pm 08:55 PM

本篇文章给大家分享一个Vue+Laravel开发教程,介绍一下怎么使用 Vue.js 和 Laravel 共建一个简单的 CRUD 应用,希望对大家有所帮助!

PHP MVC 架构的进阶指南:解锁高级功能PHP MVC 架构的进阶指南:解锁高级功能Mar 03, 2024 am 09:23 AM

mvc架构(模型-视图-控制器)是PHP开发中最流行的模式之一,因为它为组织代码和简化WEB应用程序的开发提供了清晰的结构。虽然基本的MVC原理对于大多数Web应用程序来说已经足够,但对于需要处理复杂数据或实现高级功能的应用程序,它存在一些限制。分离模型层分离模型层是高级MVC架构中常见的一种技术。它涉及将模型类分解为更小的子类,每个子类专注于特定功能。例如,对于一个电子商务应用程序,您可以将主模型类分解为订单模型、产品模型和客户模型。这种分离有助于提高代码的可维护性和可重用性。使用依赖注入依赖

vue中不同情况下怎么进行通讯?方式分享vue中不同情况下怎么进行通讯?方式分享Apr 20, 2022 pm 08:39 PM

vue中不同情况下怎么进行通讯?下面本篇文章给大家分析一下vue中不同情况下的通讯方式,希望对大家有所帮助!

vue3为什么快?vue3的效率提升主要在哪方面?vue3为什么快?vue3的效率提升主要在哪方面?Apr 26, 2022 am 10:54 AM

vue3为什么快?vue3的效率提升主要在哪方面?下面本篇文章就来给大家介绍一下vue3相对于vue2 做了那些优化,希望对大家有所帮助!

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能