1.v-show 與 v-if 區別
v-show 是css隱藏，v-if是直接銷毀和創建，所以頻繁切換的適合用v-show
2.計算屬性和 watch 的區別
計算屬性是自動監聽依賴值的變化，從而動態返回內容，監聽是一個過程，在監聽的值變化時，可以觸發一個回調，並做一些事情。
所以區別來源於用法，只是需要動態值，那就用計算屬性；需要知道值的改變后執行業務邏輯，才用 watch，用反或混用雖然可行，但都是不正確的用法。
說出一下區別會加分
computed 是一個對象時，它有哪些選項？
computed 和 methods 有什么區別？
computed 是否能依賴其它組件的數據？
watch 是一個對象時，它有哪些選項？
有get和set兩個選項
methods是一個方法，它可以接受參數，而computed不能，computed是可以緩存的，methods不會。
computed可以依賴其他computed，甚至是其他組件的data
watch 配置
handler
deep 是否深度
immeditate 是否立即執行
總結
當有一些數據需要隨着另外一些數據變化時，建議使用computed。
當有一個通用的響應數據變化的時候，要執行一些業務邏輯或異步操作的時候建議使用watcher
3.事件修飾符
綁定一個原生的click事件， 加native，
其他事件修飾符
stop（阻止事件冒泡） prevent（阻止默認事件） self（只有自己觸發，子組件不會觸發）
組合鍵
click.ctrl.exact 只有ctrl被按下的時候才觸發
4.雙向綁定的原理
通過數據劫持和發布訂閱模式方式實現的，核心的 API 是通過Object.defineProperty()來劫持各個屬性的setter / getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調，這也是為什么 Vue.js 2.x 不支持 IE8 的原因。要實現雙向綁定，首先進行數據劫持，所以需要設置一個監聽器Observer，用來監聽所有屬性。如果屬性發生變化，就需要告訴訂閱者Watcher看是否需要更新。因為訂閱者很多，所以需要一個消息訂閱器Dep來專門收集這些訂閱者，然后在監聽器和訂閱者之間進行統一管理，最后需要一個指令解析器Compile，對每個節點元素進行掃描和解析，將相關指令（v-model，v-on）對應初始化一個訂閱者Watcheer ，並替換模板數據或綁定相應函數
官網解釋：https://cn.vuejs.org/v2/guide/reactivity.html
5.怎么理解單項數據流
這是關於組件通訊中父組件的prop傳遞給子組件，在子組件中不能更改prop，只能父組件更改prop，否則會報錯。子組件想修改時，只能通過 $emit 派發一個自定義事件，父組件接收到后，由父組件修改。
一般來說，對於子組件想要更改父組件狀態的場景，可以有兩種方案：
在子組件的 data 中拷貝一份 prop，data 是可以修改的，但 prop 不能：
exportdefault{props: {value:String}, data () {return{currentValue:this.value } }}復制代碼
如果是對 prop 值的轉換，可以使用計算屬性：
exportdefault{props: ['size'],computed: {normalizedSize:function(){returnthis.size.trim().toLowerCase(); } }}
6.簡述vue的狀態管理並說明你在項目中哪些地方使用了
component通過mapactions或者dispatch將方法類型和負載傳給actions，actions接收到后進行業務處理通過commit將處理后的類型和負載傳給mutations，mutations不做業務處理，只根據接收的類型和負載將state中的數據進行突變，component通過mapgetters拿到更新后的倉庫數據。
在組件中用mapactions接管methods方法，用mapgetters接收computed計算屬性，這樣主要是為了action更簡潔，便於后期迭代更新。以下通過官網例子進行加深理解：
7.簡述下生命周期鈎子
vue實例從創建到銷毀的過程，就是生命周期。從開始創建，初始化數據，編譯模板，掛載DOM，渲染，更新再渲染，最后到銷毀等一系列過程就是生命周期。
beforeCreate：數據觀測和初始化事件還沒開始
Created：完成數據觀測，屬性和方法的運算，初始化事件，$el屬性還沒顯示出來
beforeMount：掛載前調用，相關的render第一次調用。實例已經完成編譯模板，data里的數據和模板已經生成HTML，但沒有講HTML掛載到頁面上
Mounted：el被新創建的Vm.$el替換，並掛載到實例上面調用。實例已經完成以下配置：用上面編譯好的HTML內容替換el屬性指向DOM元素。完成模板中HTML渲染到HTML頁面中。此過程進行ajax交互。
beforeUpdate:發生在虛擬dom和打補丁之前，可以在該鈎子中進一步修改狀態，不會觸發附加的沖渲染過程。
Updated：由於數據更改導致的虛擬DOM重新渲染和打補丁之后調用。調用時，組件DOM已經更新，所以可以執行依賴於DOM的操作。然而在大多數情況下，應該避免在此期間更改狀態，因為這可能會導致更新無限循環。該鈎子在服務器端渲染期間不被調用。
beforeDestroy（銷毀前） 在實例銷毀之前調用。實例仍然完全可用。
destroyed（銷毀后） 在實例銷毀之后調用。調用后，所有的事件監聽器會被移除，所有的子實例也會被銷毀。該鈎子在服務器端渲染期間不被調用。
8.組件中如何通信
九叔說要講半小時左右：。。。。
父到子：
傳<子組件 :自定義屬性=“父數據”>
收：子組件選項props：【‘自定義屬性’】
子到父：
父組件向子組件傳遞事件方法，子組件通過$emit觸發事件，回調給父組件
非父子，兄弟組件通訊：
可以通過實例一個vue實例Bus作為媒介，要相互通信的兄弟組件之中，都引入Bus，然后通過分別調用Bus事件觸發和監聽來實現通信和參數傳遞。
9.路由守衛是什么，有幾種方式
全局守衛，路由獨享守衛，組件內部守衛；
全局守衛：
router.beforeRouteEnter(to,from,next){前置守衛，進入}
router.beforeRouterLeave(to,from,next){后置守衛，離開}
to 目標路由 from 當前路由
next函數：next() == next(true) 運行跳轉
next(false) 不讓跳轉
next('字符路徑')/next({對象路徑}) 重定向
路由獨享守衛：沒有后置守衛
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
組件內部守衛：
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) { 前置
// 在渲染該組件的對應路由被 confirm 前調用
// 不！能！獲取組件實例 `this`
// 因為當守衛執行前，組件實例還沒被創建
},
beforeRouteLeave (to, from, next) { 后置
// 導航離開該組件的對應路由時調用
// 可以訪問組件實例 `this`
}
}
10.vue的優化
不支持低版本的瀏覽器，最低只支持到IE9；不利於SEO的優化（如果要支持SEO，建議通過服務端來進行渲染組件）；第一次加載首頁耗時相對長一些；不可以使用瀏覽器的導航按鈕需要自行實現前進、后退
11.什么是插槽或內容分發 ，插槽有幾種方式
組件內部保留槽位:
具名槽位:<slot name=槽名
匿名槽位: <slot></..>
調用組件插入內容: 內容 == dom | 組件
<組件名>
<template #槽名> 內容 | <組件名>
<template v-slot:槽名>內容
父級模板里的所有內容都是在父級作用域中編譯的；子模板里的所有內容都是在子作用域中編譯
12.簡述下mvvm和MVC
MVC：
1.View 傳送指令到 Controller
2.Controller 完成業務邏輯后，要求 Model 改變狀態
3.Model 將新的數據發送到 View，用戶得到反饋
MVP：
1. 各部分之間的通信，都是雙向的。
2. View 與 Model 不發生聯系，都通過 Presenter 傳遞。
3. View 非常薄，不部署任何業務邏輯，稱為"被動視圖"（Passive View），即沒有任何主動性，而 Presenter非常厚，所有邏輯都部署在那里。
MVVM：
和MVP很像，采用雙向綁定（data-binding）：View的變動，自動反映在 ViewModel，反之亦然
13.路由懶加載，異步路由，分片打包
原理: 把組件封裝到一個函數內部，路由激活時，調用該函數，函數內部 異步加載目標組件並返回
路由配置router.js:
a)
- import home from "../components/home.vue"
+ const home =()=>import("../components/home.vue");
{path:'/home', component: home }
b)
{path:xxx, component: r => { require(['./login/Login'], r) }}
15.vue的數據是響應式的，請問什么時候是非響應式的並如何解決
a:數組數據：
問題1：通過改變長度，利用索引直接設置跟項
解決：Vue.set(數組對象, key, value) | vm|this.$set(數組對象, key, value)
問題2：對數組使用了非變異 (non-mutating method) 方法（返回的了新數組）
解決：對象合並
對象數據變化：
問題：問題：data:{a:1}；a 數據是響應式的；vm.b='qq'; b 屬性不是響應式的
解決：Vue.set(對象, key, value) | vm|this.$set(對象, key, value)
總結：數據一開始就應該出現在data里，數組里面永遠不要放置簡單性數據
16.如何編寫一個自定義指令
指令是個函數或者對象，用來操作dom，指令內部的this指向window；
a:全局指令 Vue.directive（指令名稱不帶v-,回調（el,bingding））
el:dom元素；binding是個對象，含有傳入的參數，binding。value
b:局部 定義在選項里面
directives:{
指令名不帶v- : 函數(el,binding){}
}
17.如何自定義事件
定義：vm.$on( '自定義事件名'|['自定義事件名1','自定義事件名2'], 回調(參數) )
銷毀：vm.$off( '自定義事件名'|['自定義事件名1','自定義事件名2'], 回調(參數) )
觸發: vm.$emit(自定義事件名1,參數)
自定義事件名： 使用 kebab-case 的事件名
場景： 在一個組件實例上手動偵聽事件時
18.懶加載，按需加載，點擊加載，滑動加載
把組件加載封裝在一個函數中，路由激活的時候調用這個函數，這個函數在運行的時候去加載這個組件。加載用import或者requireAPI
19.如何更改計算屬性並響應式
計算屬性的set方法
20.vue的diff算法
突然發現弄懂這個就不是初級了。。。
作者：將心比心_59bf
鏈接：https://www.jianshu.com/p/875c9069dfc2
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。