MVC / MVVM

MVC就是針對(duì)后端
MVC就是，控制路由跳轉(zhuǎn)，就是控制器；[（對(duì)應(yīng)模型文件夾，和數(shù)據(jù)庫(kù)交互），向外界提供友好“接口”]
視圖是里面的模板。
通過 v 控制請(qǐng)求的流向，通過 M 去獲取數(shù)據(jù)， 通過 C 數(shù)據(jù)渲染好展示給客戶。
//前端單頁(yè)應(yīng)用，貌似多個(gè)頁(yè)面的URL用 控制器。
M： 數(shù)據(jù)
V： 控制請(qǐng)求流向
C： 控制頁(yè)面跳轉(zhuǎn)

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

2. 區(qū)別:原因就是mvc中Controller演變成mvvm中的viewModel mvc是DOM操作,MVVM(vue)演變?yōu)榱藬?shù)據(jù)驅(qū)動(dòng)!

組件之間的傳值

1. 父組件與子組件傳值 父組件通過標(biāo)簽上面定義傳值 子組件通過props方法接受數(shù)據(jù)

2. 子組件向父組件傳遞數(shù)據(jù) 子組件通過$emit方法傳遞參數(shù)

3. 同級(jí)組件通信 -把值賦值到一個(gè)公用的$vue實(shí)例上來(lái)訪問 -Vuex -父子組件聯(lián)系(舉例A組件與B組件有一個(gè)公共聯(lián)系組件C A是C的子組件 B是C的子組件 讓C起到橋接的作用)

vue的雙向數(shù)據(jù)綁定原理

vue.js 是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來(lái)劫持各個(gè)屬性的setter，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。

具體步驟：

1. 需要observe的數(shù)據(jù)對(duì)象進(jìn)行遞歸遍歷，包括子屬性對(duì)象的屬性，都加上 setter和getter,這樣的話，給這個(gè)對(duì)象的某個(gè)值賦值，就會(huì)觸發(fā)setter，那么就能監(jiān)聽到了數(shù)據(jù)變化

2. compile解析模板指令，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁(yè)面視圖，并將每個(gè)指令對(duì)應(yīng)的節(jié)點(diǎn)綁定更新函數(shù)，添加監(jiān)聽數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動(dòng)，收到通知，更新視圖

3. Watcher訂閱者是Observer和Compile之間通信的橋梁，主要做的事情是: 1、在自身實(shí)例化時(shí)往屬性訂閱器(dep)里面添加自己 2、自身必須有一個(gè)update()方法 3、待屬性變動(dòng)dep.notice()通知時(shí)，能調(diào)用自身的update()方法，并觸發(fā)Compile中綁定的回調(diào)，則功成身退。

4. MVVM作為數(shù)據(jù)綁定的入口，整合Observer、Compile和Watcher三者，通過Observer來(lái)監(jiān)聽自己的model數(shù)據(jù)變化，通過Compile來(lái)解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達(dá)到數(shù)據(jù)變化 -> 視圖更新；視圖交互變化(input) -> 數(shù)據(jù)model變更的雙向綁定效果。

具體對(duì)vue生命周期的理解

總共分為8個(gè)階段創(chuàng)建前/后，載入前/后，更新前/后，銷毀前/后。

1. 創(chuàng)建前/后： 在beforeCreated階段，vue實(shí)例的掛載元素el還沒有。

2. 載入前/后：在beforeMount階段，vue實(shí)例的$el和data都初始化了，但還是掛載之前為虛擬的dom節(jié)點(diǎn)，data.message還未替換。在mounted階段，vue實(shí)例掛載完成，data.message成功渲染。

3. 更新前/后：當(dāng)data變化時(shí)，會(huì)觸發(fā)beforeUpdate和updated方法。

4. 銷毀前/后：在執(zhí)行destroy方法后，對(duì)data的改變不會(huì)再觸發(fā)周期函數(shù)，說(shuō)明此時(shí)vue實(shí)例已經(jīng)解除了事件監(jiān)聽以及和dom的綁定，但是dom結(jié)構(gòu)依然存在

css預(yù)編譯安裝使用步驟有哪幾大特性

均是css的預(yù)編譯。(suss為例描述,其他均出入不大) 使用步驟：

1. 用npm 下三個(gè)loader（sass-loader、css-loader、node-sass）

2. 在build目錄找到webpack.base.config.js，在那個(gè)extends屬性中加一個(gè)拓展.scss

3. 還是在同一個(gè)文件，配置一個(gè)module屬性

4. 然后在組件的style標(biāo)簽加上lang屬性 ，例如：lang=”scss”

有哪幾大特性:

1、可以用變量，例如（$變量名稱=值）； 2、可以用混合器，例如（） 3、可以嵌套

vue項(xiàng)目實(shí)踐中所遇到的坑

1. 路由變化頁(yè)面數(shù)據(jù)不刷新問題

2. setTimeout/setInterval(泛指異步回掉函數(shù)的this指向)this指向改變，無(wú)法用this訪問VUe實(shí)例

3. setInterval路由跳轉(zhuǎn)繼續(xù)運(yùn)行并沒有及時(shí)進(jìn)行銷毀

4. vue 滾動(dòng)行為用法,進(jìn)入路由需要滾動(dòng)到瀏覽器底部 頭部等等

5. 實(shí)現(xiàn)vue路由攔截瀏覽器的需求,進(jìn)行 一系列操作 草稿保存等等

6. v-once 只渲染元素和組件一次，優(yōu)化更新渲染性能

7. vue本地代理配置 解決跨域問題,僅限于開發(fā)環(huán)境

8. 本地開發(fā) 沒有任何問題 部署服務(wù)器 就404啊這些問題