1、MVC、MVP、MVVM模式的概念與區別
1】MVC

a、概念
Model（模型）：表示應用程序核心（如數據庫）
View（視圖）：顯示UI效果（HTML頁面）
Controller（控制器）：處理輸入（業務邏輯）
b、過程（單向）
View 傳送指令到 Controller
Controller 完成業務邏輯后，要求 Model 改變狀態
Model 將新的數據發送到 View，View得到更新
c、優缺點
優點：M和V之間是完全隔離的, 所以在業務場景切換時, 通常只需要替換相應的C, 復用已有的M和V便可快速搭建新的業務場景. MVC因其復用性, 大大提高了開發效率, 現已被廣泛應用在各端開發中
缺點： 視圖V與控制器C間的過于緊密的連接，沒有區分業務邏輯和業務展示，
1 這對單元測試很不友好，
2 視圖jsp模板引擎，這些還會讓前端人員和后端人員的一些職責重復

2】MVP
a、概念
MVP是針對MVC的缺點而進行了改進
模型（Model）：數據庫相關的操作、文件的訪問和數據結構等
視圖（View）：專注于顯示，如Web前端(HTML/CSS/JavaScript)
展示器（Presenter）：連接模型和視圖，處理視圖的請求并根據模型更新視圖（中介）

b、優缺點
優點：
（mvc是m驅動v的變更，mvp是p展示器驅動v的變更）
MVP用展示器代替了控制器，而展示器是可以直接更新視圖，所以MVP中展示器可以處理視圖的請求并遞送到模型又可以根據模型的變化更新視圖，實現了視圖和模型的完全分離，有點類似雙向綁定
缺點：
視圖和Presenter的交互會過于頻繁，使得他們的聯系過于緊密。也就是說，一旦視圖變更了，presenter也要變更

3】MVVM

a、概念
MVVM是MVP更進一步的發展，把軟件系統分為三個基本部分：模型（Model）、視圖（View）和視圖模型（ViewModel）
模型（Model）：數據庫相關的操作、文件的訪問和數據結構等。
視圖（View）：專注于顯示，如Web前端（HTML/CSS/JavaScript）
視圖模型（ViewModel）：監聽模型數據的改變和控制視圖行為、處理用戶交互，簡單理解就是一個同步View 和 Model的對象，連接Model和View。在MVVM架構下，View 和 Model 之間并沒有直接的聯系，而是通過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的， 因此View 數據的變化會同步到Model中，而Model 數據的變化也會立即反應到View 上。
b、優缺點
優點：通過雙向數據綁定把 View 層和 Model 層連接了起來，而View 和 Model 之間的同步工作完全是自動的，無需人為干涉，因此開發者只需關注業務邏輯，不需要手動操作DOM, 不需要關注數據狀態的同步問題，復雜的數據狀態維護完全由 VM 來統一管理。
1】低耦合：視圖（View）可以獨立于 Model 變化和修改，一個 ViewModel 可以綁定到不同的"View"上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變（React單向綁定）。
2】可重用性：你可以把一些視圖邏輯放在一個ViewModel里面，讓很多 view 重用這段視圖邏輯。
3】獨立開發：開發人員可以專注于業務邏輯和數據的開發（ViewModel），設計人員可以專注于頁面設計。
4】可測試：界面素來是比較難于測試的，而現在測試可以針對ViewModel來寫。
***相對mvc，mvvm主要解決了：
mvc中大量的DOM 操作使頁面渲染性能降低，加載速度變慢，影響用戶體驗。
缺點： 因為使用了dataBinding，增加了大量的內存開銷，增加了程序的編譯時間（webpack），項目越大內存開銷越大。
c、MVVM的實現主要是三個核心點：
響應式：vue如何監聽data的屬性變化
模板解析：vue的模板是如何被解析的
渲染：vue模板是如何被渲染成HTML的

2、單頁面應用及其優缺點
單頁應用，即在一個頁面里面加載了所有的HTML、JavaScript 和 CSS
1】優點：
1).良好的交互體驗
用戶不需要重新刷新頁面，獲取數據也是通過Ajax異步獲取，頁面顯示流暢。
2).良好的前后端工作分離模式
單頁Web應用可以和RESTful規約一起使用，通過REST API提供接口數據，并使用Ajax異步獲取，這樣有助于分離客戶端和服務器端工作。更進一步，可以在客戶端也可以分解為靜態頁面和頁面交互兩個部分。
3).減輕服務器壓力
服務器只用出數據就可以，不用管展示邏輯和頁面合成，吞吐能力會提高幾倍；
4).共用一套后端程序代碼
不用修改后端程序代碼就可以同時用于Web界面、手機、平板等多種客戶端；
2】缺點：
1).SEO難度較高
由于所有的內容都在一個頁面中動態替換顯示，所以在SEO上其有著天然的弱勢，所以如果你的站點對SEO很看重，且要用單頁應用，那么就做些靜態頁面給搜索引擎用吧。
2).前進、后退管理
由于單頁Web應用在一個頁面中顯示所有的內容，所以不能使用瀏覽器的前進后退功能，所有的頁面切換需要自己建立堆棧管理，當然此問題也有解決方案，比如利用URI中的散列+iframe實現。
3).初次加載耗時多
為實現單頁Web應用功能及顯示效果，需要在加載頁面的時候將JavaScript、CSS統一加載，部分頁面可以在需要的時候加載。所以必須對JavaScript及CSS代碼進行合并壓縮處理，如果使用第三方庫，建議使用一些大公司的CDN，因此帶寬的消耗是必然的。

3、Vue
（關鍵點：漸進式框架，自底向上，只關注視圖層，一切皆組件）
Vue 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。
對于vue而言，一切皆組件（組件系統），因為組件本質就是是可復用的 Vue 實例。vue初始化的時候，在mian.js里面通過Vue.component()創建一個全局組件之后，我們可以new一個Vue實例，然后就把根節點掛載上去。new Vue({ el: ‘#app’ })，然后在這個 Vue 根實例中，把這個組件作為自定義元素來使用。

4、vue漸進式框架的理解
每個框架都不可避免會有自己的一些特點，從而會對使用者有一定的要求，這些要求就是主張，主張有強有弱，它的強勢程度會影響在業務開發中的使用方式。
Vue可能有些方面是不如React，不如Angular，但它是漸進的，沒有強主張，你可以在原有大系統的上面，把一兩個組件改用它實現，當jQuery用；也可以整個用它全家桶開發，當Angular用；還可以用它的視圖，搭配你自己設計的整個下層用。你可以在底層數據邏輯的地方用OO和設計模式的那套理念，也可以函數式，都可以，它只是個輕量視圖而已，只做了自己該做的事，沒有做不該做的事，僅此而已。

5、vue.js的兩個核心是什么？三要素是什么？
1】兩個核心：雙向數據綁定 和 組件系統
2】三要素：響應式、模板引擎 和 渲染

6、vue生命周期詳解
1】生命周期
Vue 實例從創建到銷毀的一系列過程，就是生命周期。從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、銷毀等一系列過程，稱之為 Vue 的生命周期。
2】生命周期的作用是什么？
它的生命周期中有多個事件鉤子，讓我們在控制整個Vue實例的過程時更容易形成好的邏輯。

Vue所有的生命周期鉤子自動綁定在this上下文到實例中，因此你可以訪問數據，對屬性和方法進行運算。這意味著你不能使用箭頭函數來定義一個生命周期方法。這是因為箭頭函數綁定了父級上下文，因此this與你期待的Vue實例不同。
（注：vm.$el 是用于獲取和操作Vue實例關聯的DOM元素的一個對象）

1】beforeCreate
vue實例創建之前，data 和 $el(dom)都沒有初始化 全部為 undefined
應用：可以在此時加一些loading效果，在created 時進行移除（App.vue或者其他組件）

2】created
vue實例創建完成，data 初始化完成，但 $el 沒有初始化
應用：如果業務邏輯不涉及到需要頁面加載完成之后的話，可以在這里進行 ajax 請求

3】beforeMount（模板解析中）
虛擬dom解析成真實dom，并掛載到Vue實例之前~
data 和 $el 均已存在，template模板已導入渲染函數編譯。而當前階段虛擬dom已經創建完成，即將開始渲染。在此時也可以對數據進行更改，不會觸發updated。
應用：這里實際應用比較少

4】mounted
虛擬dom解析成真實dom，并掛載到Vue實例之后~
模板引擎已被完全解析成html，掛載到Vue實例上，并渲染到頁面
應用：
1.可以進行ajax請求；
2.因為dom已經完全渲染出來了，可以在這里進行dom操作。
注意：若涉及父子組件，父組件mounted完畢以后，子組件還不一定mounted完畢。如果你希望等到整個視圖都渲染完畢，可以用 vm.$nextTick 替換掉 mounted

5】beforeUpdate
在數據更新之前調用，發生在虛擬DOM重新渲染之前。可以在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程，會更新當前組件數據，但未在頁面渲染出來。

6】updated
data發生變化，觸發DOM重新渲染，當這個生命周期函數被調用時，組件 DOM 已經更新完畢，所以你現在可以執行依賴于 DOM 的操作。
應用：
任何數據的更新，如果要做統一的業務邏輯處理，可以在這個鉤子里面進行。
例如：
即時聊天項目，打開當前會話加載完消息后需要自動滾動到窗口最底部。滾動到底部這個操作就可以放在這個鉤子函數里面來完成。
注意：
a、當實例每次進行數據更新時updated都會執行。
b、無論是組件本身的數據變更，還是從父組件接收到的 props 或者從vuex里面拿到的數據有變更，都會觸發虛擬 DOM 重新渲染和打補丁，并在之后調用 updated。

7】beforeDestroy 【類似于React生命周期的componentWillUnmount】
實例銷毀之間調用。在這一步，實例仍然完全可用。該鉤子在服務端渲染期間不被調用。
應用：可以在這里清除定時器。

8】destroyed
Vue實例銷毀后調用。調用后，Vue實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。該鉤子在服務端渲染不會被調用

***另外還有 keep-alive 獨有的生命周期，分別為 activated 和 deactivated
被keep-alive包含的組件不會被再次初始化，也就意味著不會重走生命周期函數
1】activated
keep-alive組件激活時調用。該鉤子在服務器端渲染期間不被調用。
2】deactivated
keep-alive組件停用時調用。該鉤子在服務端渲染期間不被調用。

***關于updated鉤子函數一個問題：
data里面數據發生變化，一定會觸發updated這個鉤子函數嗎？
答：只有data里的變量改變并且要在頁面重新渲染完成之后，才會進updated生命周期。只改變data里的值，但是沒有再頁面上渲染該值的話，并不會觸發updated。
比如data里面某個值傳入Null，值是改變了，但是對于頁面還說是沒有變化的，所以不會觸發updated。

7、生命周期鉤子函數可以用箭頭函數嗎？
不可以。箭頭函數的this指向父級上下文，而生命周期鉤子函數的this默認指向Vue實例，強行用箭頭函數會導致this指向錯誤。

8、this.$nextTick用法和實際應用場景1】原理數據更新?>視圖更新完畢之后進行的邏輯操作vue最大的特點是雙向綁定（響應式），數據發生變化，視圖就會更新。但是，視圖更新這個操作是異步的。當偵聽到數據發生變化時，Vue將開啟一個異步的視圖更新隊列，視圖需要等這個隊列中所有數據變化完成之后，再統一進行更新。我們可以使用$nextTick(callback)。這里的回調函數（callback）將在數據更新完成，并且視圖更新完畢之后被調用。
nextTick的底層還是基于setTimeout來實現的，setTimeout本身是宏任務，可以優先執行。
2】應用場景
1）如果要在created()鉤子函數中進行的DOM操作，由于created()鉤子函數中還未對DOM進行任何渲染，所以無法直接操作，需要通過KaTeX parse error: Expected '}', got 'EOF' at end of input: … () { this.nextTick(()=>{
this.KaTeX parse error: Expected 'EOF', got '}' at position 34: … = "鋼鐵的翅膀" }?) } 注：在created(…nextTick()會報錯。
2）在使用某些第三方插件時 ，比如echart 在初始化的時候，由于dom渲染還未完成，因此或造成初始化報錯，所以要放在 this.$nextTick的回調里面。3）mounted不會承諾所有的子組件也都一起被掛載（父組件先mount，子組件后mount）。如果你希望等到整個視圖都渲染完畢，可以用vm.$nextTick 替換掉 mounted：
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}

9、vue中組件的data為什么是一個函數
組件是可復用的vue實例，一個組件被創建好之后，就可能被用在各個地方，而組件不管被復用了多少次，組件中的data數據都應該是相互隔離，互不影響的，基于這一理念，組件每復用一次，data數據就應該被復制一次，之后，當某一處復用的地方組件內data數據被改變時，其他復用地方組件的data數據不受影響。
恰好函數具備這個特性，函數內部的局部變量，只有內部感知，不會對外界造成影響。
***為什么在大型項目中data需要使用return返回數據呢？
答：不使用return包裹的數據會在項目的全局可見，會造成變量污染；使用return包裹后數據中變量只在當前組件中生效，不會影響其他組件。

10、父組件傳值給子組件遇到的生命周期問題
項目遇到父組件傳值給子組件，子組件監聽數據變化可以用watch監聽數據變化

如果要在子組件打印父組件傳來的數據必須是在beforeUpdate和updated生命周期才能監聽的到
***Vue 的父組件和子組件生命周期鉤子執行順序：
組件的調用順序都是先父后子,渲染完成的順序是先子后父。
組件的銷毀操作是先父后子，銷毀完成的順序是先子后父。
1】加載渲染過程
父組件掛載前準備編譯模板的時候，先讓子組件編譯模板并掛載完畢以后，父組件再掛載。
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

2】子組件更新過程
父beforeUpdate->子beforeUpdate->子updated->父updated

3】父組件更新過程
父beforeUpdate->父updated（跟子沒有關系）
4】銷毀過程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

11、vue打包后會生成哪些文件？
默認生產 dist 文件夾：
生產index.html單頁面文件
將組件中的 css 編譯合并成一個 app.[hash].css 的文件，
js 則在合并后又拆解成 了 4 個文件：
app.[hash].js 包含了所有 components 中的 js 代碼
vendor.[hash].js 包含了生產環境所有引用的 node_modules 中的代碼
mainfest.[hash].js 則包含了 webpack 運行環境及模塊化所需的 js 代碼
0.[hash].js 則是 vue-router 使用了按需加載生產的js文件
static 靜態文件夾
這樣拆分的好處是：
每塊組件修改重新編譯后不影響其他未修改的 js 文件 的 hash 值，這樣能夠最大限度地使用緩存，減少 HTTP 的請求數

12、Vue3.0和Vue2.0的區別
響應式的變更：
2用的是Object.defineProperty，3用的是Proxy
1】默認進行懶觀察（lazy observation）
在 2.x 版本里，不管數據多大，都會在一開始就為其創建觀察者。當數據很大時，這可能會在頁面載入時造成明顯的性能壓力。3.x 版本，只會對「被用于渲染初始可見部分的數據」創建觀察者，而且 3.x 的觀察者更高效。
2】更精準的變更通知
比例來說：2.x 版本中，使用 Vue.set 來給對象新增一個屬性時，這個對象的所有 watcher 都會重新運行；3.x 版本中，只有依賴那個屬性的 watcher 才會重新運行。
3】3.0 新加入了 TypeScript 以及 PWA 的支持
4】部分命令發生了變化：
下載安裝 npm install -g vue@cli
刪除了vue list
創建項目 vue create
啟動項目 npm run serve
5】默認項目目錄結構也發生了變化：
移除了配置文件目錄，config 和 build 文件夾
移除了 static 文件夾，新增 public 文件夾，并且 index.html 移動到 public 中
在 src 文件夾中新增了 views 文件夾，用于分類 視圖組件 和 公共組件
6】代碼體積變得更小

13、vue和react的區別
1】數據：
　　vue：雙向數據綁定和單向數據流。雙向數據綁定：DOM元素綁定的data值，當發生改變后，vue的響應式機制會自動監聽data的變化重新渲染。單向數據流：當父組件給子組件傳遞數據的時候，子組件只可以讀取而不能修改數據。可以用watch監聽數據的更改，再賦給父組件的變量。
　　react：單向數據流。DOM元素依賴于state，但改變state不會改變渲染好的DOM，通過setState()才能重新渲染。父組件傳值到子組件，如果頂級的props變了，會重新渲染所有的子組件。
2】虛擬DOM：
　　vue：計算出虛擬DOM的差異，在渲染的過程中跟蹤每個組件的依賴關系，不會重新渲染整個組件樹
　　react：當應用的狀態改變時，重新渲染全部子組件，可以通過shouldComponentUpdate生命周期進行優化
3】模板和jsx：
　　vue：具有單文件組件，可以把html、css、js寫在一個vue文件里----MVVM框架
　　react：依賴于jsx，在JavaScript中創建DOM----視圖層框架
4】構建工具：
　　vue：vue-cli
　　react：create-react-app 項目名
5】app開發
　　vue：Weex目前處于開發的狀態
　　react：React Native能在手機上創建原生應用，React在這方面處于領先位置。
6】團隊支持：
　　vue：尤雨溪個人，目前和阿里合作
　　react：facebook維護
7】開發選擇
快速開發客戶端頁面可以選用vue，復雜的后臺管理系統可以用react

14、兩種路由模式
1】hash模式
本質：window.location.hash，用來獲取或設置頁面的標簽值。
a. HTTP請求不包括#，#是用來指導瀏覽器動作的，對服務器端完全無用，對瀏覽器而言，就是一個位置標識符
b.單單改變#后的部分，瀏覽器只會滾動到相應位置，不會重新加載網頁
c.每一次改變#后的部分，都會在瀏覽器的訪問歷史中增加一個記錄
2】history模式
利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定瀏覽器支持）這兩個方法應用于瀏覽器的歷史記錄棧，在當前已有的 back、forward、go 的基礎之上，它們提供了對歷史記錄進行修改的功能。
history 模式下，前端的 URL 必須和實際向后端發起請求的 URL 一致，如：http://www.xxx.com/items/id。后端如果缺少對 /items/id 的路由處理，將返回 404 錯誤
注意：pushState和replaceState，都不會刷新瀏覽器頁面。
3】兩種模式對比
hash模式由于帶有#，導致做微信H5分享的時候，會出一些問題。

15、router-link和傳統a鏈接的區別
1】通過a標簽進行跳轉，頁面會被重新渲染，即相當于重新打開一個新的網頁，體現為視覺上的“閃爍”（如果是本地的項目基本看不出來）
2】通過router-link進行跳轉不會跳轉到新的頁面，也不會重新渲染，它會選擇路由所指的組件進行渲染，避免了重復渲染的“無用功”。

16、vue是單向還是雙向數據流？
單向數據流。
單向數據流指的父組件傳值給子組件，子組件不能修改這個值，而父組件修改這個值的話子組件也會受影響，這個影響是單向的，只能從父組件流向子組件，不能反向。
ng貌似是雙向數據流。

17、Vue組件通信有哪些方式？
1】父子組件通信
父->子props，子->父 $on、$emit
獲取父子組件實例 $parent、$children
ref 獲取實例的方式調用組件的屬性或者方法
2】兄弟組件通信
Event Bus 實現跨組件通信 Vue.prototype.$bus = new Vue()
Vuex
3】跨級組件通信
Vuex
$attrs、$listeners

18、axios
1）axios如何封裝而成，有無閱讀過axios的源碼

2）axios的二次封裝
import axios from ‘axios’;
import ui from ‘ui’;
let baseURL;
//是判斷生產環境或開發環境的依據的
if(process.env.NODE_ENV==‘development’){
baseURL = ‘http://localhsot:8888/vue/demo1/api/’ //開發環境
} else {
baseURL = ‘/xxx’ //生產環境
}
// axios.create 創建axios對象，包含baseURL axios.get(“url”)
const $http = axios.create({
baseURL,
})
//url 路徑 params 參數 http://localhsot:8888/vue/demo1/api/a.php?page=3
export const get = (url,params)=>{
ui.loading(); //加載效果
params = params || {};//參數要么有 或 空對象
return new Promise((resolve,reject)=>{
// axiso 自帶 get 和 post 方法
$http.get(url,{params,}).then(res=>{ //get請求 url 路徑參數
ui.cancelLoding();
resolve(res.data);
}).catch(error=>{
ui.alert(‘網絡異常’);
})
})
}
export const post = (url,params)=>{
ui.loading(); //加載效果
params = params || {};
return new Promise((resolve,reject)=>{
$http.post(url,params).then(res=>{
ui.cancelLoding();
resolve(res.data);
}).catch(error=>{
ui.alert(‘網絡異常’);
})
})
}
3）axios的攔截器
在請求發送之前，以及數據返回之后，我們都可以對請求的結構以及返回的數據做一個處理，然后在將請求發給后端（如在請求頭中增加token），如果是后端返回數據，則可以根據狀態碼來進行提前的一個提示。
// 構建axios實例
const instance = axios.create({
baseURL: process.env.BASE_API, // 該處url會根據開發環境進行變化（開發/發布）
timeout: 10000 // 設置請求超時連接時間
})
1】request 攔截器
instance.interceptors.request.use(
config => {
console.log(config); // 該處可以將config打印出來看一下，該部分將發送給后端（server端）
config.headers.token = ‘該處可設置token內容’;
return config // 對config處理完后返回，下一步將向后端發送請求
},
error => { // 當發生錯誤時，執行該部分代碼
console.log(error); //調試用
return Promise.reject(error)
}
)
2】response攔截器
instance.interceptors.response.use(
response => { // 該處為后端返回整個內容
const res = response.data; // 該處可將后端數據取出，提前做一個處理
if (‘正常情況’) {
return response // 該處將結果返回，下一步可用于前端頁面渲染用
} else {
alert(‘該處異常’);
return Promise.reject(‘error’)
}
},
error => {
console.log(error),
return Promise.reject(error)
}
)
3）注意，axios 是 取不到 cookie的
1】開發的時候，存在跨域
如果要發送Cookie，后端的Access-Control-Allow-Origin就不能設為星號，必須指定明確的、與請求網頁一致的域名。同時，Cookie依然遵循同源政策，只有用服務器域名設置的Cookie才會上傳
前端vue設置proxyTable代理
后端的Access-Control-Allow-Origin不能為*
注意：http 和 https 也算是跨域！

19、mixin
混入 (mixin) 提供了一種非常靈活的方式，來分發 Vue 組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項。
var mixin = {
created: function () {
console.log(‘混入對象的鉤子被調用’)
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log(‘組件鉤子被調用’)
}
})
上面的例子：
執行created優先調用混入對象的created
但是data()里面數據沖突的時候，以組件的data為準；同樣，methods方法里面的fun同名，也是以組件內的為準

1】全局混入
類似上面例子，new實例化Vue對象里面引入mixin
實際應用場景：微信H5和微信小程序的分享功能（要求每個頁面都可以轉發分享）
2】選項合并
可以在單個組件里面引入 mixin

20、Vue.extend
Vue.extend是Vue實例的拓展，可以用于開發一些獨立的組件。
1】基本用法
參數：Vue.extend(options)，options包含template 和 data
結合$mount，可以把自定義的標簽掛載到指定的元素上面

2】源碼剖析
extend方法返回的其實是1個構造函數，而且繼承自Vue，因此extend方法返回的是Vue的1個子類。
3】應用場景
所有內容都是在 #app 下渲染，注冊組件都是在當前位置渲染。如果我要實現一個類似于 window.alert() 提示組件要求像調用 JS 函數一樣調用它，該怎么辦？
這時候，Vue.extend + vm.$mount 組合就派上用場了

21、Vue.use()
一般是用于全局注冊插件
1】用法
a、vue2.x使用Vue.use()
import Vue from ‘vue’;
Vue.use(xxx);
b、vue3.x使用app.use()
import { createApp } from ‘vue’;
import App from ‘./App.vue’;
const app = createApp(App);
app.use(xxx);
2】參數
Vue.use(options)
options為1個對象或者函數，并且必須帶有install 方法，通過install 方法注冊到全局
a、對象
const demo = {
// 參數為對象時，需要提供install方法
install: (Vue) => {
Vue.prototype.$Toast=()=>console.log{(}^{\prime }全局toast提{示}^{\prime });//toast提示,通過this.$Toast調用
Vue.prototype.$request=()=>console.log{(}^{\prime }全局request請{求}^{\prime });//request請求,通過this.$request調用
}
}
export default demo;
b、函數（本身作為1個install方法）
const common = (Vue) => {
// 定義一些vue中常用的全局方法
Vue.prototype.$Toast=()=>console.log{(}^{\prime }全局toast提{示}^{\prime });//toast提示,通過this.$Toast調用
Vue.prototype.$request=()=>console.log{(}^{\prime }全局request請{求}^{\prime });//request請求,通過this.$request調用
};
export default common;
3】Vue.use源碼
a、首先先判斷插件plugin是否是對象或者函數：
b、判斷vue是否已經注冊過這個插件，如果已經注冊過，跳出方法
c、取Vue.use()里面的參數，通過toArray將傳入的參數整理成數組
d、判斷插件是否有install方法，如果有就執行install()方法；沒有就直接把plugin當Install執行

22、vue插件機制
1】插件通常用來為 Vue 添加全局功能：比如添加全局指令vue-touch，或者全局混入一些組件選項比如vue-router
2】通過全局方法 Vue.use() 使用插件。它需要在你調用 new Vue() 啟動應用之前完成
3】開發插件
Vue.js 的插件應該暴露1個 install 方法。這個方法的第1個參數是 Vue 構造器，第2個參數是1個可選的選項對象：
MyPlugin.install = function (Vue, options) {
Vue.myGlobalMethod = function () { // 1. 添加全局方法或 property
// 邏輯…
}
Vue.directive(‘my-directive’, { // 2. 添加全局資源
bind (el, binding, vnode, oldVnode) {
// 邏輯…
}
})
Vue.mixin({ // 3. 注入組件選項
created: function () {
// 邏輯…
}
})
Vue.prototype.$myMethod = function (methodOptions) { // 4. 添加實例方法
// 邏輯…
}
}

23、自定義指令
1】創建局部指令
var app = new Vue({
el: ‘#app’,
data: {
},
// 創建指令(可以多個)
directives: {
// 指令名稱
dir1: {
inserted(el) {
// 指令中第一個參數是當前使用指令的DOM
console.log(el);
console.log(arguments);
// 對DOM進行操作
el.style.width = ‘200px’;
el.style.height = ‘200px’;
el.style.background = ‘#000’;
}
}
}
})
2】全局指令
Vue.directive(‘dir2’, {
inserted(el) {
console.log(el);
}
})
3】指令的使用

24、插槽
1】單個插槽 | 默認插槽 | 匿名插槽
匿名插槽就是可以在父組件中的子組件的標簽中直接添加內容。
用法：
在子組件埋入，父組件引用子組件的時候，可以在子組件標簽的內部填入任何元素。
2】具名插槽
具名插槽就是一個擁有name屬性的插槽，具名插槽可以在同一組件中多次使用。
用法：
子組件：
父組件：

按鈕

3】作用域插槽
作用域插槽就是一個可以攜帶數據的具名插槽，稱為作用域插槽。
用法：
子組件：
父組件：

{{scope.message}}

25、組件的自我調用
1】實際用途
組件自我調用，一般都是用于實現遞歸展示。
比如類似這種嵌套的數據結構，每一層的結構都基本類似，在不清楚有多少層的情況下，利用組件的自我調用可以解決。
dataList:[
{
name:‘名稱1’,
children:[
{
name:‘名稱1-1’
children:[
{
name:‘名稱1-1-1’,
children:[
//…
]
}
]
}
]
}
]
2】用法
利用name這個屬性即可實現
export default {
name: “myTree”,
…
},
}

26、計算屬性computed與methods
1】computed與methods的區別
a、computed計算屬性中定義的是屬性而不是函數，所以使用時直接用{{xxx}}
methods中定義的是函數，因此使用時需要{{xxx()}}
b、計算屬性computed被使用時會進行緩存，如果需要多次使用，則只需要調用1次
而methods中的函數無緩存，如果需要使用n次，則需要調用n次
2】為什么使用計算屬性時不用加()
計算屬性的實質為屬性，其中定義了set()方法和get()方法

一般使用中不需要set方法，我們只需要get方法，因此計算屬性一般為“只讀屬性”
去掉無用的set方法后，computed屬性簡寫為我們常見的方式：

只是形式上看起來像函數，實質上computed計算屬性是屬性，所以不要加()。

27、Vue路由懶加載原理
組件的按需加載也是這個原理
1】定義
路由懶加載也可以叫做路由組件懶加載，原理： Vue 的異步組件 和 Webpack 的代碼分割。
const Foo = () => import(‘./Foo.vue’)
const router = new VueRouter({
routes: [
{ path: ‘/foo’, component: Foo }
]
})
2】Webpack 的代碼分割
（詳情見webpack篇）
通過Webpack編譯打包后，會把每個路由組件的代碼分割成一一個js文件（chunk塊），初始化時不會加載這些js文件，只當激活路由組件才會去加載對應的js文件。

3】Vue 的異步組件
異步組件主要通過 代碼分割 和 延遲加載 來實現。
a、靜態導入模塊
import utils from ‘./utils’

b、動態導入模塊
1）a、使用vue-router中需求的’syntax-dynamic-import’插件，然后在webpack的plugin里面配置這個插件；b、在webpack配置文件的出口處，配置chunkFilename屬性；
這樣在代碼內部，使用import語法。同時，在import語法使用的地方，指定對應的模塊名webpackChunkName。
2）語法：通過箭頭函數+直接import相關的模塊
動態導入是一個返回Promise的函數，這樣可以延遲加載相應的模塊
() => import(/* webpackChunkName: ‘ImportFunc’ */ ‘./components/Tooltip’)
3）注意
沒有指定webpackChunkName，每個組件打包成一個js文件；
指定了相同的webpackChunkName，會合并打包成一個js文件，把組件按組分塊。

c、也可以通require導入
component: resolve => require([‘@/components/home’], resolve)
這里的component配置返回了一個Promise函數

28、父組件監聽子組件的生命周期
可以在父組件引用子組件時通過 @hook 來監聽即可
// Parent.vue
<Child @hook:mounted=“doSomething” >
doSomething() {
console.log(‘父組件監聽到 mounted 鉤子函數 …’);
},
// Child.vue
mounted() {
console.log(‘子組件觸發 mounted 鉤子函數 …’); //先打印
},
// 以上輸出順序為：
// 子組件觸發 mounted 鉤子函數 …
// 父組件監聽到 mounted 鉤子函數 …
@hook方法不僅僅是可以監聽 mounted，其它的生命周期事件，例如：created，updated 等都可以監聽。

29、父子組件獲取對方的dom
1】父組件獲取子組件的dom
this.$refs.xxx

2】子組件獲取父組件的dom this.$parent.數據 this.$parent.方法

總結

以上是生活随笔為你收集整理的Vue基础理论篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。