闡述 MVC 模式
1, MVC與MVVM
MVC 他是后端的一個開發思想
MVVM是基于MVC中的view這層所分離出來的一種設計模式。
MVC架構詳解
MVC（Model-View-Controller）是一種廣泛使用的軟件設計模式，主要用于分離應用程序的業務邏輯、用戶界面和輸入控制。這種架構通過將應用劃分為三個主要部分——模型（Model）、視圖（View）和控制器（Controller），從而實現了清晰的功能劃分2。
模型（Model）
模型負責管理數據以及與數據庫或其他持久化存儲交互的邏輯。它是應用程序的核心，包含了所有的業務邏輯和數據操作方法。無論是在桌面應用還是Web應用中，模型都充當著數據提供者的角色。例如，在J2EE環境中，模型可能涉及DAO（Data Access Object）層的設計，用于執行CRUD（Create, Read, Update, Delete）操作1。
視圖（View）
視圖是用戶看到并與之交互的部分。它的職責僅限于展示來自模型的數據給用戶，并允許用戶觸發事件以便更新這些數據。在現代Web開發中，HTML頁面通常作為視圖的一部分存在，而JavaScript框架則進一步增強了動態效果和支持異步通信的能力4。
控制器（Controller）
控制器充當中介的角色，接收用戶的輸入并調用相應的模型組件去處理該請求，然后再決定顯示哪個視圖來響應客戶端。具體來說，當用戶提交表單或者點擊鏈接時，HTTP請求會被發送到服務器端的一個特定控制器實例上；此實例會解析這個請求并將必要的信息傳遞給模型進行加工后再返回結果給前端渲染成最終呈現出來的網頁內容
MVC與MVVM思想
項目結構與文件類型
全局標題與頁面標題
全局樣式與頁面樣式
App 的生命周期
頁面的聲明周期
數據綁定與事件
組件中的動態與靜態變量
條件判斷與for循環
多端兼容條件編譯
MVC模式
1，M: model-模型層，數據的增刪改查
2, V: view-視圖層， 前端頁面(html/javascript/css)
3, C: controller-控制層，處理業務
比如說現在有一個訂單，用戶要去下訂單，要去支付的話，肯定要去創建一個訂單，那么在頁面上用戶會觸發一個點擊事件下單，隨后頁面就會觸發一個事件，在頁面里面他就是一個view,通過事件觸發以后，事件會達到我們后端，后端再我們路由配置里會接收到用戶的請求，用戶的請求，請求到我們的后端，要去執行哪一個方法，哪一個controller,或者說是Ajax，是由路由所去控制的，路由拿到請求去分析之后，他是一個request請求映射，映射到我們某一個控制器，就會直接把用戶的請求丟到控制器，讓我們的控制器去針對我們用戶請求去做相應的處理。
路由： 只處理用戶的請求，拿到請求然后直接丟給我們的控制器，他不做額外的處理，僅僅負責頁面導向作用。我們業務處理完畢了，要針對訂單去做保存。
記錄數據，通過model層，去做一個相應的增加操作，可以去增加一條日志，可以去增加一條訂單，數據都會保存在我們數據庫里面，隨后，我們要去做一個查詢操作，也就是說，我們雖然把數據插入到數據庫，我們還會去查詢一下最新增加的數據，這個查詢操作也是在model層去做的，其實 model 層就是我們的數據庫，那么最后處理完畢之后，拿到了相應的用戶所需要的一些信息之后，他會在返回到我們的控制器，返回給controller,隨后再去進行相應的業務處理，最后包裝完畢數據之后，然后再拋給我們的view,跑到頁面上去做一個渲染，以上整個過程就是MVC的處理過程。
這是我們后端開發要使用的一種開發思想，設計模式。
什么是MVVM？
MVVM 是一種軟件架構模式，用于將應用程序的用戶界面（View）與數據和業務邏輯（Model）進行分離。MVVM 的核心思想是通過一個稱為 ViewModel 的中間層來連接 View 和 Model。
M：Model（模型）代表應用程序的數據和業務邏輯。它負責數據的獲取、處理和存儲，以及定義應用程序的行為。 V：View（視圖）代表應用程序的用戶界面。它負責展示數據和與用戶進行交互，通常由 HTML、XML 或其他類似的標記語言編寫。 VM：ViewModel（視圖模型）它是 View 和 Model 之間的連接層。ViewModel 處理用戶界面上的事件和輸入，并將它們轉化為對 Model 的操作。它還負責從 Model 中獲取數據，并將數據綁定到 View 中，使得數據的變化能夠自動更新到用戶界面上。
? ? 記錄數據通過model層去做一個相應的增加操作，可以去增加一條日志，可以去增加一條訂單，數據都會保存在我們數據庫里面，隨后，我們要去做一個查詢操作，也就是說，我們雖然把數據插入到數據庫，我們還會去查詢一下最新增加的數據，這個查詢操作也是在model層去做的，其實model層，就是我們的數據層，那么最后處理完畢之后，拿到了相應的用戶所需要的一些信息之后，它會再返回到我們的控制器，返回給controller,隨后再去進行相應的業務處理，最后，包裝完畢數據之后，然后再拋給我們的view,跑到頁面上去做一個渲染，以上整個過程就是MVC的處理過程。
這里的view是指的是我們視圖層里面的一個頁面
model 每一個頁面里面存在的數據
查詢用戶訂單，訂單的數據就是我們的model,用戶要去注冊或者修改個人信息，那么我們的model，他就是一個JSON對象，也就是說，我們所有的需要再頁面里面去展示，去渲染的那些數據都是我們的model,假設我們現在還是使用的時 js/jquery的操作方式。
使用原生的js/jquery去操作我們的DOM,這時比如說用戶是在做修改個人信息，那么此時修改之后我們首先
第一步， 我們要去獲取用戶現有的個人信息，獲得了個人信息以后，我們發送給Ajax到后端，獲得相應的 JSON對象，JSON對象此時就在我們的Model里面，在Model里面以后，我們是需要把里面的數據渲染到頁面里面去，而且我們會寫一個相反的方法。
比如說從model獲取到相應的字段，有用戶的昵稱，用戶的性別，用戶的喜好等等我們都可以獲得，一個個都把他渲染到頁面的，每一個相應的組件里面去，這個過程其實就是我們使用js/jquery的一種方式
另外，當我們把數據渲染到頁面里面去之后，用戶去做修改，然后提交，那么用戶修改的時候，監聽用戶的一個動作，用戶修改了文本框view,我們都會去寫相應的方法，把這些數據重新拿到手或者說把相應的內容封裝到我們的model里面去，這個過程，我們需要額外去寫一個方法的，當然我們也可以去使用form表單，把form里面的數據序列化成一個對象，隨后我們再提交到去做一個修改的操作，這是我們已經操作過的方式。我們要使用MVVM這樣一個模式的時候，我們就不再使用js/jquery以前的這種方式，不去操作DOM,此時我們引入一個新的概念，則是view/model他是一個核心調度者協調器，他是專門在中間做數據的傳遞工作的，比如我們現在拿到用戶的數據以后不是直接交給view去渲染，我們自會把相應的數據丟給 View Model(VM)讓VM去做渲染的動作，隨后我們的數據就會去HTML頁面做相應渲染，隨后用戶去到我們頁面里面操作了，其他的DOM的一些元素修改了一些數據，此時，我們開發者不需要額外的去寫相應的方法，只要用戶修改了數據，相應的數據就會通過View Model再去傳遞到我們的Model,這整個兩個方向的動作，其實都是由我們的VM調度器去做相應的處理，對于這樣的操作，我們稱之為數據雙向綁定，這整個過程就是我們MVVM的設計思想，是一種開發模式。
template 里面使用的視圖組件view,相當于我們使用的dir.
通過代碼闡述MVVM與雙向綁定
注意：一個頁面只能有一對template,script,style標簽
template 代表的就是一個頁面 view
script標簽里面的export default {} 固定的默認寫法，他是一個實例，他也是一個對象，他就是我們的協調者，調度器，就是VM
MVVM （Model-View-ViewModel）是一種用于構建用戶界面應用程序的設計模式，現常用于在桌面、移動和Web應用程序開發中。通俗地講，它可以理解為MVC的改進版，把MVC中的V（View）的狀態和行為抽象化，把視圖UI與業務邏輯分開。
一，MVVM 核心三組件
1. M：模型(Model) ：對應 data 中的數據2. V：視圖(View) ：模板3. VM：視圖模型(ViewModel) ： Vue 實例對象如下圖所示結構：
模型（Model）：代表應用程序的數據和業務邏輯。Model負責數據的存儲、檢索和操作，但不直接與用戶界面交互。可以理解為廚房。廚房負責準備食物。廚師們（數據）知道如何制作各種菜肴（業務邏輯）。他們不直接和顧客交流，而是通過服務員來傳遞食物。
視圖模型（ViewModel）：作為Model和View之間的橋梁，ViewModel負責轉換Model中的數據，使其更適合在View中顯示。ViewModel還處理用戶的輸入，并將這些輸入轉換為對Model的操作。ViewModel監聽Model中數據的變化，并將這些變化通過數據綁定傳遞給View。可以理解為服務員。服務員是連接廚房和餐廳的橋梁。他們從廚房（Model）獲取食物，然后端給顧客（View）。同時，他們也會把顧客的需求（比如加辣、少鹽）傳達給廚房。服務員確保顧客的需求被正確理解和滿足。
視圖（View）：代表用戶界面，負責向用戶展示數據和接收用戶的輸入。View通過數據綁定與ViewModel交互，當ViewModel中的數據發生變化時，View會自動更新以反映這些變化。同時，View也可以監聽用戶的交互（如點擊按鈕），并將這些事件傳遞給ViewModel處理。 可以理解為餐廳。餐廳是顧客用餐的地方，相當于用戶界面。顧客在這里點菜（用戶輸入），并享用食物（查看數據）。餐廳的服務員（View的代碼）會將顧客的訂單（用戶操作）傳遞給廚房，并將做好的菜肴（數據顯示）端給顧客。二，數據綁定與事件綁定圖中箭頭表示數據和事件的流向：數據綁定：ViewModel和View之間的數據是雙向綁定的，即ViewModel中的數據變化會自動更新到View，View中的用戶輸入也會自動更新到ViewModel。事件綁定：View中的用戶交互（如按鈕點擊）會觸發ViewModel中的命令或方法，從而更新Model中的數據。
代碼解釋：
<!-- <template><script><style> 這三個標簽在每個頁面都只能存在一個 -->
<!-- template: View這層 代表的只是一個頁面 -->
<template><view class="content"><image class="logo" src="/static/logo.png"></image><view class="text-area"><text class="title">{{title}}</text><input type="text" :value="title" @input="change" /></view></view>
</template><script>// VM 協調者，調度者export default {// Model 所有的數據data() {return {title: 'Hello NEXT 學院'}},onLoad() {},methods: {change(e) {var txtTitle = e.detail.value;this.title = txtTitle;}}}
</script>代碼解釋：
template: 代表一個頁面 View
script: 代表協調者調度器 VM(View Model)
export default{}
固定的默認寫法，他是一個實例，他也是一個對象，他就是我們的一個協調者調度器
只要是在我們的data(){}里面寫了相應的數據，數據就可以通過我們的View進行數據渲染，渲染到我們的頁面里面去
然后再我們data(){}里面需要注意的，每一個data他都會return{}一個對象，return對象里面就是我們開發者所需要去寫的所有數據，在return{}對象里面，不管你去寫一個字符串，還是一個int型的，還是整型，數組，對象，都是沒有問題，
我們這里<script>中的View Model(VM),和我們<template>中的View進行了相應的陳述，并且我們相應的數據只要去data(){}里面去寫上，某一個對應的屬性，就可以做到相應的渲染，如果我們按照以往的開發模式，要去手動的去操作DOM的話，我們首先需要去獲取text這個標簽，獲取后通過 innerHTML相應的DOM的值賦上去，這樣一次操作，我們現在是不需要的，因為我們的VM是不需要手動去操作DOM,下面我們來寫一個小例子。<input type="text" :value="title" />:value="title" 是vue.js中的一個寫法，表示只要在 value 前面加上 : 我們當前value的值就會和data(){}里面的屬性，比如 "title" 進行關聯，這是需要做一個理解的。@ // 所有的事件都以@開頭methods: {} // 用戶所有的自定義方法都寫到這里MVVM與雙向綁定 實現代碼
pages/index/index.vue
<!-- <template><script><style> 這三個標簽在每個頁面都只能存在一個 -->
<!-- template: View這層 代表的只是一個頁面 -->
<template><view class="content"><image class="logo" src="/static/logo.png"></image><view class="text-area"><text class="title">{{title}}</text><input type="text" :value="title" @input="change" /></view></view>
</template><script>// VM 協調者，調度者export default {// Model 所有的數據data() {return {title: 'Hello NEXT 學院'}},onLoad() {},methods: {change(e) { // e是觸發事件var txtTitle = e.detail.value; // value是detail里面的一個屬性this.title = txtTitle; // 覆蓋data(){}里面現有的數據}}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}
</style>
)
 的解決方案)
