1、vue的雙向綁定原理是什么

通過數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式實現(xiàn)的，具體過程如下：
實現(xiàn)數(shù)據(jù)雙向綁定，首先是對數(shù)據(jù)進行劫持監(jiān)聽，所有需要設(shè)置一個ObServer，用來監(jiān)聽所有屬性。如果屬性發(fā)生變化，就需要告訴訂閱者Watcher看是否需要更新，因為訂閱者有很多，所以還需要一個消息訂閱器Dep來專門收集這些訂閱者，然后在監(jiān)聽器ObServer和訂閱者Watcher之間進行統(tǒng)一管理還需要一個Complie解析器 對每個節(jié)點元素進行掃描和解析。 將相關(guān)指令對應初始化成一個訂閱者Watcher，并替換模板數(shù)據(jù)或者綁定相對應的函數(shù)。 此時，當訂閱者Watcher接收到相應屬性的變化。就會執(zhí)行對應的更新函數(shù)。從而更新視圖。
1).首先需要對數(shù)據(jù)進行劫持監(jiān)聽，所以需要實現(xiàn)一個監(jiān)聽器Observer，用來監(jiān)聽并劫持所有屬性，如果有變動 就通知訂閱者
2).實現(xiàn)一個訂閱者Watcher,可以收到屬性的變化通知并執(zhí)行相對應的函數(shù)，從而更新視圖。
3). 實現(xiàn)一個解析器Compile 可以掃描和解析每個節(jié)點的相關(guān)指令 并根據(jù)初始化模板以數(shù)據(jù)及初始化相對應的訂閱器。

2、vue兩個核心是什么

數(shù)據(jù)驅(qū)動和組件化

3. v-if 和 v-show的區(qū)別

相同點： 都是判斷DOM節(jié)點是否需要顯示
不同：
a、實現(xiàn)方式： v-if是根據(jù)后面數(shù)據(jù)的真假判斷直接從DONM樹上刪除或者重建元素。v-show只是修改元素的CSS樣式。元素始終都在DOM樹上。
b、編譯過程：v-if切換有一個局部編譯/卸載的過程，切換過程中會合適的銷毀和重建內(nèi)部的事件監(jiān)聽子組件，v-show只是基于css的切換。
c、編譯條件：v-if是惰性的，如果初始條件為假，則什么都不做。只有在條件第一次變?yōu)檎娌艜ゾ幾g，v-show是在任何條件下都會被編譯，然后被緩存。而且DOM元素一直都存在。

4、vue常用的修飾符

a、按鍵修飾符：delete keyup 用法都和事件修飾符一樣 掛在v-on的后面
b、系統(tǒng)修飾符：可以用如下修飾符來實現(xiàn)僅在按下相應按鍵時才觸發(fā)鼠標或鍵盤事件的監(jiān)聽器
ctrl .alt .shift .meta
c、 鼠標修飾符
.left .right .middle 這些修飾符會限制處理函數(shù)僅響應特定的鼠標按鈕。
d、事件修飾符
.stop 等同于JavaScript中的event.stopPropagation() 防止事件冒泡
.prevent 等同于JavaScript 中的event.preventDefault() 防止執(zhí)行預設(shè)行為。用于取消默認事件。
.capture 與事件冒泡的方向相反 事件捕獲由外到內(nèi)。
.self 只會觸發(fā)自己 范圍內(nèi)的事件 不包含子元素
.once 只會觸發(fā)一次
e、.lazy
在默認情況下 v-model在每次input事件觸發(fā)后將輸入框的值與數(shù)據(jù)進行同步 我們可以添加lazy修飾符 從而轉(zhuǎn)變成 change事件進行同步
f、.number
如果想自動將用戶的輸入值變成數(shù)值類型 可以給 v-model添加 .number
g、.trim
自動過濾 用戶輸入非首位空白字符 可以給v-model 添加 trim

5、 vue中key的作用

使用key來給每一個節(jié)點做一個唯一的標識
key的作用主要是為了高效的更新DOM
另外vue中在使用相同標簽名元素的過渡切換時，也會使用到key屬性，其目的也是為了讓vue可以區(qū)分它們，
否則vue只會替換其內(nèi)部屬性而不會觸發(fā)過渡效果。

6、Vue中為什么data必須是一個函數(shù)

在 new Vue()中 data是可以作為一個對象進行操作的。
然而在compoents中 data只能是以函數(shù)的形式存在。不能直接將對象賦值給它。
當data是一個函數(shù)的時候 每個實例對象 可以維護一份被返回對象的獨立拷貝，這樣各個實例中的data不會互相影響，是獨立的。

7、vue中子組件調(diào)用父組件的方法

a、直接在子組件中通過this.emit向父組件觸發(fā)一個事件 父組件監(jiān)聽這個事件就好了
c、父組件把方法傳給子組件，在子組件中調(diào)用這個方法

8、vue中父組件調(diào)用子組件的方法

父組件利用 ref 屬性 操作子組件的方法

9、vue組件之間的傳值

a、 父組件調(diào)用子組件的時候動態(tài)綁定屬性
b、子組件定義props接收動態(tài)綁定的屬性
c、子組件也可以使用$emit 把值傳給父組件

10、vue頁面級組件傳值

a、使用vue-router通過跳轉(zhuǎn)鏈接帶參數(shù)傳參
b、使用localStorge
c、使用vue數(shù)據(jù)管理傳值，

11、動態(tài)組件

多個組件通過同一個掛載點進行組件的切換 is的值是哪個組件的名稱 那么頁面就會顯示哪個組件

12、keep-alive

可以讓當前組件或者路由不經(jīng)歷創(chuàng)建和銷毀 而是進行緩存
凡是被kepp-alive包裹的組件 除了第一次使用外 不會經(jīng)歷創(chuàng)建和銷毀階段 第一次被創(chuàng)建后就在緩存中了。

13、怎么定義vue-router的動態(tài)路由？怎樣獲取傳過來的值

動態(tài)路由創(chuàng)建，主要是使用path屬性 使用動態(tài)路徑參數(shù) 以冒號開頭

    {
        path:'/details/:id',
        name:'Details',
        components:Details
    }

當匹配到/details下的路由時 參數(shù)會被設(shè)置到this.route.params.id

14、vue-router有哪幾種路由守衛(wèi)

全局前置守衛(wèi)：router.beforeEach
后置守衛(wèi)：。router.afterEach
全局解析守衛(wèi)：reouter.beforeResolve
路由獨享守衛(wèi)：beforeEnter
組件內(nèi)部的守衛(wèi)：beforeRouterEnter、beforeRouterUpdate、beforeRouterLeave

15、route的區(qū)別

route 是路由信息對象 跳轉(zhuǎn)的路由對象 每一個路由都會有一個route對象 是一個局部對象 包含了path、params、hash、query、name、matched等

16、vue-router響應路由參數(shù)的變化

a、watch監(jiān)聽
b、組件內(nèi)部 導航鉤子函數(shù) beforeRouterUpdate(to,from,next)

17、vue-router 傳參

使用Params: 只能使用name， 不能使用path參數(shù) 不會顯示在路徑上 你瀏覽器強制刷新參數(shù)會被清空
使用Query： 參數(shù)會顯示在路徑上，刷新不會被清空 name 可以使用path路徑

18、說出至少 4 種 vue 當中的指令和它的用法

v-if(判斷是否隱藏)
v-for(把數(shù)據(jù)遍歷出來)
v-bind(綁定屬性)、v-model(實現(xiàn)雙向綁定)

19、MVVM 和 MVC的區(qū)別

MVVM ---> Model-View-ViewModel 即模型-視圖-視圖模型。
模型 --> 后端傳遞的數(shù)據(jù)。
視圖 --> 所看到頁面。
視圖模型 --> 是 mvvm的核心 它是連接view 和model的橋梁 有兩個方向
a、將模型轉(zhuǎn)換成視圖，即將后端傳回的數(shù)據(jù)轉(zhuǎn)成所看到的頁面。 實現(xiàn)方式 數(shù)據(jù)綁定
b、將視圖轉(zhuǎn)換成模型，即將所看的頁面轉(zhuǎn)換成后端的數(shù)據(jù) 實現(xiàn)方式 是DOM事件監(jiān)聽，這兩個方向都是閑的 我們稱之為 雙線數(shù)據(jù)綁定

MVC --> Model - View - Controller 即模型 - 視圖 - 控制器
M和V指的意思和MVVM中的M和V意思一樣。C即Controller指的是頁面的業(yè)務邏輯
使用MVC的目的 是將M和V的代碼分離。MVC是單通信。

20、Vue 的 nextTick 的原理是什么？

a、 為什么需要nextTick
Vue是異步修改DOM 并且不鼓勵開發(fā)者去直接修改DOM 但有時候業(yè)務需要必須對數(shù)據(jù)進行更改 刷新后的DOM做對應的處理 這個時候就可以使用Vue.nextTick(callback)這個api
b、理解nextTick
原理：vue通過異步隊列控制DOM更新和nextTick回調(diào)函數(shù)先后執(zhí)行的方式。
*** vue響應式的改變一個值 以后 此時DOM 并不會立即更新 如果需要在數(shù)據(jù)改變以后立即通過DOM做一些操作 就可以使用$nextTick獲得更新后的DOM。

21、Proxy 與 Object.defineproperty的區(qū)別

Proxy優(yōu)勢：
可以直接監(jiān)聽對象 而非屬性
可以直接監(jiān)聽數(shù)組的變化
有多達13種攔截方式：不限于 apply ownKeys、 deleteProperty等等 是 Object.defineproperty不具備的
返回的是一個新對象 可以只操作新的對象達到目的 而 Object.defineProperty只能遍歷對象屬性直接修改
作為新標準將受到瀏覽器廠商的重點持續(xù)的優(yōu)化 也就是新標準的紅利期
Object.defineProperty
兼容性好 IE9

22、 vue中如何重置data

使用Object.assign();vm.options.data可以獲取到組件初始化狀態(tài)下的data。
Object.assign(this.options.data())

23、template 作用

當一個不可見得包裹元素 減少不必要的DOM元素 整個結(jié)構(gòu)會更加清晰

24、computed watch區(qū)別

1、computed是計算屬性 更多用于計算
2、conputed 具有緩存性 在getter之后會進行緩存 足有在它依賴的屬性值發(fā)生改變后 下一次computed 的值才會重新調(diào)用對應的getter計算
3、computed 適用于計算比較消耗性能的計算場景中
watch:
1、更多是類似于某種數(shù)據(jù)的監(jiān)聽回調(diào) 用于觀察 props $emit或者本組件的值 當數(shù)據(jù)發(fā)生變化時 來執(zhí)行回調(diào)進行后續(xù)操作
2、無緩存性 頁面重新渲染時值不變也會執(zhí)行

25、vue的diff算法

1、當數(shù)據(jù)發(fā)生變化時 直接渲染真實的DOM開銷挺大的 所以 可以使diff 只去更新某一個小塊
2、在采取diff算法比較新舊節(jié)點的時候，比較只會在同層級進行, 不會跨層級比較。
3、當數(shù)據(jù)發(fā)生改變時 set方法 會調(diào)用Dep.notify 通知所有訂閱者，訂閱者就會用patch給真實的DOM打補丁

26、不用Vuex會帶來的問題
1、可維護性下降 想要修改數(shù)據(jù) 得維護好幾處
2、可讀性下降 因為一個組件里面的數(shù)據(jù) 你根本看不出來從哪里來的
3、增加了耦合性 大量的上傳派發(fā) 會讓耦合性大大的增加 本來Vue用Component就是為了降低耦合

27、虛擬DOM實現(xiàn)原理

1、虛擬DOM本質(zhì)上是JavaScript對象 是對真實DOM的抽象
2、狀態(tài)變更時 記錄新樹和舊樹的差異
3、最后把差異更新到真正的DOM中

28、vue-cli工作

.vue文件 --> .js文件
ES6語法 --> ES5語法
Sass、Lass、Stylus--> CSS
對img 等靜態(tài)資源的處理
熱更新
定義環(huán)境變量 區(qū)分dev 和 production 模式