一、對於MVVM的理解?
View 代表UI 組件,它負責將數據模型轉化成UI 展現出來。
二、Vue的生命週期
destroyed(銷燬後) 在實例銷燬之後調用。調用後,所有的事件監聽器會被移除,所有的子實例也會被銷燬。該鉤子在服務器端渲染期間不被調用。
答:它的生命週期中有多個事件鉤子,讓我們在控制整個Vue實例的過程時更容易形成好的邏輯。
答:它可以總共分爲8個階段:創建前/後, 載入前/後,更新前/後,銷燬前/銷燬後。
答:會觸發 下面這幾個beforeCreate, created, beforeMount, mounted 。
答:DOM 渲染在 mounted 中就已經完成了。
三、 Vue實現數據雙向綁定的原理:Object.defineProperty()
<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
四、Vue組件間的參數傳遞
子組件傳給父組件:$emit方法傳遞參數
五、Vue的路由實現:hash模式 和 history模式
六、Vue與Angular以及React的區別?
七、vue路由的鉤子函數
八、vuex是什麼?怎麼使用?哪種功能場景使用它?
場景有:單頁應用中,組件之間的狀態、音樂播放、登錄狀態、加入購物車
const store = new Vuex.Store({ //store實例
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
項目特別複雜的時候,可以讓每一個模塊擁有自己的state、mutation、action、getters,使得結構非常清晰,方便管理。
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
})
九、vue-cli如何新增自定義指令?
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';
}
}
}
})
Vue.directive('dir2', {
inserted(el) {
console.log(el);
}
})
<div id="app">
<div v-dir1></div>
<div v-dir2></div>
</div>
十、vue如何自定義一個過濾器?
<div id="app">
<input type="text" v-model="msg" />
{{msg| capitalize }}
</div>
var vm=new Vue({
el:"#app",
data:{
msg:''
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
十一、對keep-alive 的瞭解?
在vue 2.1.0 版本之後,keep-alive新加入了兩個屬性: include(包含的組件緩存) 與 exclude(排除的組件不緩存,優先級大於include) 。
<keep-alive include='include_components' exclude='exclude_components'>
<component>
<!-- 該組件是否緩存取決於include和exclude屬性 -->
</component>
</keep-alive>
include - 字符串或正則表達式,只有名稱匹配的組件會被緩存
exclude - 字符串或正則表達式,任何名稱匹配的組件都不會被緩存
include 和 exclude 的屬性允許組件有條件地緩存。二者都可以用“,”分隔字符串、正則表達式、數組。當使用正則或者是數組時,要記得使用v-bind 。
<!-- 逗號分隔字符串,只有組件a與b被緩存。-->
<keep-alive include="a,b">
<component></component>
</keep-alive>
<!-- 正則表達式 (需要使用 v-bind,符合匹配規則的都會被緩存) -->
<keep-alive :include="/a|b/">
<component></component>
</keep-alive>
<!-- Array (需要使用 v-bind,被包含的都會被緩存) -->
<keep-alive :include="['a', 'b']">
<component></component>
</keep-alive>
十二、一句話就能回答的面試題
答:在style標籤中寫入scoped即可 例如:<style scoped></style>
答:v-if按照條件是否渲染,v-show是display的block或none;
答:$route是“路由信息對象”,包括path,params,hash,query,fullPath,matched,name等路由信息參數。而$router是“路由實例”對象包括了路由的跳轉方法,鉤子函數等。
答:數據驅動、組件系統
答:v-for 、 v-if 、v-bind、v-on、v-show、v-else
答:.prevent: 提交事件不再重載頁面;.stop: 阻止單擊事件冒泡;.self: 當事件發生在該元素本身而不是子元素的時候會觸發;.capture: 事件偵聽,事件發生的時候會調用
答:可以
答:當 Vue.js 用 v-for 正在更新已渲染過的元素列表時,它默認用“就地複用”策略。如果數據項的順序被改變,Vue 將不會移動 DOM 元素來匹配數據項的順序, 而是簡單複用此處每個元素,並且確保它在特定索引下顯示已被渲染過的每個元素。key的作用主要是爲了高效的更新虛擬DOM。
答:在模板中放入太多的邏輯會讓模板過重且難以維護,在需要對數據進行復雜處理,且可能多次使用的情況下,儘量採取計算屬性的方式。好處:①使得數據處理結構清晰;②依賴於數據,數據更新,處理結果自動更新;③計算屬性內部this指向vm實例;④在template調用時,直接寫計算屬性名即可;⑤常用的是getter方法,獲取數據,也可以使用set方法改變數據;⑥相較於methods,不管依賴的數據變不變,methods都會重新計算,但是依賴數據不變的時候computed從緩存中獲取,不會重新計算。
答:優點:Vue 的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件,核心是一個響應的數據綁定系統。MVVM、數據驅動、組件化、輕量、簡潔、高效、快速、模塊友好。
缺點:不支持低版本的瀏覽器,最低只支持到IE9;不利於SEO的優化(如果要支持SEO,建議通過服務端來進行渲染組件);第一次加載首頁耗時相對長一些;不可以使用瀏覽器的導航按鈕需要自行實現前進、後退。
答:在 router 目錄下的 index.js 文件中,對 path 屬性加上 /:id,使用 router 對象的 params.id 獲取。
回覆“加羣”與大佬們一起交流學習~
點擊“閱讀原文”查看 100+ 篇原創文章
本文分享自微信公衆號 - 前端自習課(FE-study)。
如有侵權,請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”,歡迎正在閱讀的你也加入,一起分享。