1. 談?wù)勀銓?duì)MVVM開發(fā)模式的理解
MVVM分為Model史汗、View、ViewModel三者拒垃。
Model：代表數(shù)據(jù)模型停撞，數(shù)據(jù)和業(yè)務(wù)邏輯都在Model層中定義；
View：代表UI視圖悼瓮，負(fù)責(zé)數(shù)據(jù)的展示戈毒；
ViewModel：負(fù)責(zé)監(jiān)聽Model中數(shù)據(jù)的改變并且控制視圖的更新，處理用戶交互操作横堡；
Model和View并無(wú)直接關(guān)聯(lián)埋市，而是通過(guò)ViewModel來(lái)進(jìn)行聯(lián)系的，Model和ViewModel之間有著雙向數(shù)據(jù)綁定的聯(lián)系翅萤。因此當(dāng)Model中的數(shù)據(jù)改變時(shí)會(huì)觸發(fā)View層的刷新恐疲，View中由于用戶交互操作而改變的數(shù)據(jù)也會(huì)在Model中同步腊满。
這種模式實(shí)現(xiàn)了Model和View的數(shù)據(jù)自動(dòng)同步套么，因此開發(fā)者只需要專注對(duì)數(shù)據(jù)的維護(hù)操作即可，而不需要自己操作dom碳蛋。
2. Vue 有哪些指令胚泌？
v-html、v-show肃弟、v-if玷室、v-for等等零蓉。
3. v-if 和 v-show 有什么區(qū)別？
v-show 僅僅控制元素的顯示方式穷缤，將 display 屬性在 block 和 none 來(lái)回切換敌蜂；而v-if會(huì)控制這個(gè) DOM 節(jié)點(diǎn)的存在與否。當(dāng)我們需要經(jīng)常切換某個(gè)元素的顯示/隱藏時(shí)津肛，使用v-show會(huì)更加節(jié)省性能上的開銷章喉；當(dāng)只需要一次顯示或隱藏時(shí)，使用v-if更加合理身坐。
4. 簡(jiǎn)述Vue的響應(yīng)式原理
當(dāng)一個(gè)Vue實(shí)例創(chuàng)建時(shí)秸脱，vue會(huì)遍歷data選項(xiàng)的屬性，用 Object.defineProperty將它們轉(zhuǎn)為getter/setter并且在內(nèi)部追蹤相關(guān)依賴部蛇，在屬性被訪問(wèn)和修改時(shí)通知變化摊唇。 每個(gè)組件實(shí)例都有相應(yīng)的watcher程序?qū)嵗鼤?huì)在組件渲染的過(guò)程中把屬性記錄為依賴涯鲁，之后當(dāng)依賴項(xiàng)的setter被調(diào)用時(shí)巷查，會(huì)通知watcher重新計(jì)算，從而致使它關(guān)聯(lián)的組件得以更新抹腿。
5. Vue中如何在組件內(nèi)部實(shí)現(xiàn)一個(gè)雙向數(shù)據(jù)綁定吮便？
假設(shè)有一個(gè)輸入框組件，用戶輸入時(shí)幢踏，同步父組件頁(yè)面中的數(shù)據(jù)髓需。
具體思路：父組件通過(guò)props傳值給子組件，子組件通過(guò) $emit 來(lái)通知父組件修改相應(yīng)的props值房蝉，具體實(shí)現(xiàn)如下：
import Vue from 'vue'
const component = {
?props: ['value'],
?template: `
? ?<div>
? ? ?<input type="text" @input="handleInput" :value="value">
? ?</div>
?`,
?data () {
? ?return {
? ?}
?},
?methods: {
? ?handleInput (e) {
? ? ?this.$emit('input', e.target.value)
? ?}
?}
}
new Vue({
?components: {
? ?CompOne: component
?},
?el: '#root',
?template: `
? ?<div>
? ? ?<comp-one :value1="value" @input="value = arguments[0]"></comp-one>
? ?</div>
?`,
?data () {
? ?return {
? ? ?value: '123'
? ?}
?}
})
可以看到僚匆，當(dāng)輸入數(shù)據(jù)時(shí)，父子組件中的數(shù)據(jù)是同步改變的：
我們?cè)诟附M件中做了兩件事搭幻，一是給子組件傳入props咧擂，二是監(jiān)聽input事件并同步自己的value屬性。那么這兩步操作能否再精簡(jiǎn)一下呢檀蹋？答案是可以的松申，你只需要修改父組件：
template: `
? ?<div>
? ? ?<!--<comp-one :value1="value" @input="value = arguments[0]"></comp-one>-->
? ? ?<comp-one v-model="value"></comp-one>
? ?</div>
?`
v-model 實(shí)際上會(huì)幫我們完成上面的兩步操作。
6.?Vue中如何監(jiān)控某個(gè)屬性值的變化俯逾？
7.Vue中給data中的對(duì)象屬性添加一個(gè)新的屬性時(shí)會(huì)發(fā)生什么贸桶，如何解決？
8.如何優(yōu)化SPA應(yīng)用的首屏加載速度慢的問(wèn)題桌肴？
9.前端如何優(yōu)化網(wǎng)站性能皇筛？
10.jQuery如何擴(kuò)展自定義方法
目前來(lái)看公司面試的問(wèn)題還是比較基礎(chǔ)的，但是對(duì)于某些只追求會(huì)用并不研究其原理的同學(xué)來(lái)說(shuō)可能就沒(méi)那么容易了坠七。所以大家不僅要追求學(xué)習(xí)的廣度水醋，更要追求深度旗笔。后面的五個(gè)問(wèn)題的答案，下次更新拄踪，不想錯(cuò)過(guò)的伙伴可以關(guān)注我~
