目錄：
①v-show 與 v-if 區(qū)別
②動(dòng)態(tài)綁定class的方法
③計(jì)算屬性和 watch 的區(qū)別
④怎樣理解單向數(shù)據(jù)流
⑤keep-alive
⑥自定義組件的語法糖 v-model 是怎樣實(shí)現(xiàn)的
⑦生命周期
⑧組件通信
⑨路由跳轉(zhuǎn)
⑩vue-router 有哪幾種導(dǎo)航鉤子
★Vue.js 2.x 雙向綁定原理
★什么是 MVVM葵硕，與 MVC 有什么區(qū)別
★vuex
★this.$nextTick()
v-show 與 v-if 區(qū)別：
1卖陵、v-hsow和v-if的區(qū)別： v-show是css切換儡嘶，v-if是完整的銷毀和重新創(chuàng)建。
2芜飘、使用 頻繁切換時(shí)用v-show务豺，運(yùn)行時(shí)較少改變時(shí)用v-if
3、v-if=‘false’ v-if是條件渲染燃箭，當(dāng)false的時(shí)候不會(huì)渲染
綁定 class 的數(shù)組用法：
對(duì)象方法
v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
數(shù)組方法v-bind:class="[class1, class2]"
行內(nèi)v-bind:style="{color: color, fontSize: fontSize+'px' }"
計(jì)算屬性和 watch 的區(qū)別：
計(jì)算屬性是自動(dòng)監(jiān)聽依賴值的變化冲呢，從而動(dòng)態(tài)返回內(nèi)容，監(jiān)聽是一個(gè)過程招狸，在監(jiān)聽的值變化時(shí)敬拓，可以觸發(fā)一個(gè)回調(diào)，并做一些事情裙戏。
所以區(qū)別來源于用法乘凸，只是需要?jiǎng)討B(tài)值，那就用計(jì)算屬性累榜；需要知道值的改變后執(zhí)行業(yè)務(wù)邏輯营勤，才用 watch灵嫌，用反或混用雖然可行，但都是不正確的用法葛作。
說出一下區(qū)別會(huì)加分
computed 是一個(gè)對(duì)象時(shí)寿羞，它有哪些選項(xiàng)？
computed 和 methods 有什么區(qū)別赂蠢？
computed 是否能依賴其它組件的數(shù)據(jù)绪穆？
watch 是一個(gè)對(duì)象時(shí)，它有哪些選項(xiàng)虱岂？
有g(shù)et和set兩個(gè)選項(xiàng)
2.methods是一個(gè)方法玖院，它可以接受參數(shù)，而computed不能第岖，computed是可以緩存的难菌，methods不會(huì)。
3.computed可以依賴其他computed蔑滓，甚至是其他組件的data
4.watch 配置
handler
deep 是否深度
immeditate 是否立即執(zhí)行
總結(jié)：
當(dāng)有一些數(shù)據(jù)需要隨著另外一些數(shù)據(jù)變化時(shí)郊酒，建議使用computed。 當(dāng)有一個(gè)通用的響應(yīng)數(shù)據(jù)變化的時(shí)候键袱，要執(zhí)行一些業(yè)務(wù)邏輯或異步操作的時(shí)候建議使用watcher
事件修飾符
1猎塞、綁定一個(gè)原生的click事件， 加native杠纵，
2、其他事件修飾符
3钩骇、stop prevent self
4比藻、組合鍵 click.ctrl.exact 只有ctrl被按下的時(shí)候才觸發(fā)
組件中 data 為什么是函數(shù)
為什么組件中的 data 必須是一個(gè)函數(shù)，然后 return 一個(gè)對(duì)象倘屹，而 new Vue 實(shí)例里银亲，data 可以直接是一個(gè)對(duì)象？
因?yàn)榻M件是用來復(fù)用的纽匙，JS 里對(duì)象是引用關(guān)系务蝠，這樣作用域沒有隔離，而 new Vue 的實(shí)例烛缔，是不會(huì)被復(fù)用的馏段，因此不存在引用對(duì)象的問題。
keep-alive
自定義組件的語法糖 v-model 是怎樣實(shí)現(xiàn)的
Render 函數(shù) 怎樣理解單向數(shù)據(jù)流
這個(gè)概念出現(xiàn)在組件通信践瓷。父組件是通過 prop 把數(shù)據(jù)傳遞到子組件的院喜，但是這個(gè) prop 只能由父組件修改，子組件不能修改晕翠，否則會(huì)報(bào)錯(cuò)喷舀。子組件想修改時(shí)，只能通過 $emit 派發(fā)一個(gè)自定義事件，父組件接收到后硫麻，由父組件修改爸邢。
一般來說，對(duì)于子組件想要更改父組件狀態(tài)的場(chǎng)景拿愧，可以有兩種方案：
在子組件的 data 中拷貝一份 prop杠河，data 是可以修改的，但 prop 不能：
props: {
value: String
},
data () {
return {
currentValue: this.value
}
}
}
如果是對(duì) prop 值的轉(zhuǎn)換赶掖，可以使用計(jì)算屬性：
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase();
}
}
}
生命周期
創(chuàng)建前后 beforeCreate/created在beforeCreate 階段感猛，vue實(shí)例的掛載元素el和數(shù)據(jù)對(duì)象data都為undefined，還未初始化奢赂。在created階段陪白，vue實(shí)例的數(shù)據(jù)對(duì)象有了，el還沒有膳灶。
載入前后 beforeMount/mounted在beforeMount階段咱士，vue實(shí)例的$el和data都初始化了，但還是掛載之前未虛擬的DOM節(jié)點(diǎn)轧钓，data尚未替換序厉。在mounted階段，vue實(shí)例掛載完成毕箍，data成功渲染弛房。
更新前后 beforeUpdate/updated當(dāng)data變化時(shí)，會(huì)觸發(fā)beforeUpdate和updated方法而柑。這兩個(gè)不常用文捶，不推薦使用。
銷毀前后beforeDestory/destoryed beforeDestory是在vue實(shí)例銷毀前觸發(fā)媒咳，一般在這里要通過removeEventListener解除手動(dòng)綁定的事件粹排。實(shí)例銷毀后，觸發(fā)的destroyed涩澡。
組件間的通信
- 父子 props/event
parentchildren ref provide/inject- 兄弟 bus vuex
- 跨級(jí) bus vuex provide.inject
路由的跳轉(zhuǎn)方式
一般有兩種
<router-link to='home'> router-link標(biāo)簽會(huì)渲染為<a>標(biāo)簽顽耳，咋填template中的跳轉(zhuǎn)都是這種；
另一種是編程是導(dǎo)航 也就是通過js跳轉(zhuǎn) 比如router.push('/home')
Vue.js 2.x 雙向綁定原理
這個(gè)問題幾乎是面試必問的妙同，回答也是有深有淺射富。基本上要知道核心的 API 是通過
Object.defineProperty()來劫持各個(gè)屬性的setter / getter粥帚，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者辉浦，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)，這也是為什么 Vue.js 2.x 不支持 IE8 的原因（IE 8 不支持此 API茎辐，且無法通過 polyfill 實(shí)現(xiàn)）宪郊。 cn.vuejs.org/v2/guide/re…
什么是 MVVM掂恕，與 MVC 有什么區(qū)別
www.ruanyifeng.com/blog/2015/0…
nextTick()
在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后弛槐，立即使用這個(gè)回調(diào)函數(shù)懊亡，獲取更新后的 DOM。
vm.msg = 'Hello'
// DOM 還未更新
Vue.nextTick(function () {
// DOM 更新
})
web前端☆喜歡就關(guān)注我吧乎串！
