關于VUE的面試題(小結)

一、生命周期
鉤子函數(shù):
- beforeCreate
- created:此時首次可以使用data和methods
- beforeMount:模板在內存中
- mounted:DOM渲染在頁面中,可以訪問DOM結構
二、computed、getter、setter
- computed:處理復雜的聲明式邏輯
- getter:computed的默認屬性,用于讀值
- setter:設值屬性
//html中 <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> //js中 data: { message: 'Hello' }, computed: { // 計算屬性的 getter reversedMessage: function () { // `this` 指向 vm 實例 return this.message.split('').reverse().join('') } //getter為默認屬性,一般默認省略getter,完整寫法: reversedMessage: { get() { return this.message.split('').reverse().join('') }, set(newValue) { this.message = newValue } } } //結果 Original message: "Hello" Computed reversed message: "olleH"
運行vm.message = 'goodbye',setter會被調用,message會被更新
Q1. computed vs methods
methods: { reversedMessage: function () { return this.message.split('').reverse().join('') } }
computed可以實現(xiàn)的結果看似用methods也可以實現(xiàn),二者的區(qū)別在于:計算屬性(computed)是基于它們的響應式依賴進行緩存的,只在相關響應式依賴發(fā)生改變時它們才會重新求值;相比之下,每次觸發(fā)重新渲染都會使得調用方法(methods)再次執(zhí)行函數(shù)。
Q2. computed vs watch
watch是VUE實例上監(jiān)聽響應數(shù)據變動的屬性,當數(shù)據發(fā)生變化時做出相應的變化。
data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, //使用watch watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } //使用computed computed: { fullName: function () { return this.firstName + ' ' + this.lastName } }
可以看出使用watch,當一個數(shù)據的變化受多個數(shù)據影響的時候,命令式會變得重復,這個時候很容易造成濫用watch。watch更適合于在數(shù)據變化時執(zhí)行異步或者開銷較大的操作時。
- watch擅長處理的場景:一個數(shù)據影響多個數(shù)據
- computed擅長處理的場景:一個數(shù)據受多個數(shù)據影響
三、watch監(jiān)聽對象內部變化
- 只是監(jiān)聽Obj內的某一屬性:直接用obj.key進行監(jiān)聽
- 對整個obj深層監(jiān)聽
data: { a: 100, b: { value: 1, type: 2 } } watch: { //普通監(jiān)聽 a(newval, oldval){ console.log("new-a:"+newval+',old-a:'+oldval); } b(val, oldVal){ console.log("b.value: "+val.value, oldVal.value); }, //監(jiān)聽整個obj,深層監(jiān)聽 b:{ handler(val, oldVal){ console.log("b.value: "+val.value, oldVal.value); }, deep:true immediate: true }, //監(jiān)聽Obj中的屬性,obj.key 'b.value': { handler(val,oldVal){ console.log("b.value: "+val, oldVal); } }, }
- handler:監(jiān)聽數(shù)組或對象時候用到的方法,深層監(jiān)聽。只要obj中有屬性值變化就進行監(jiān)聽但不知道具體是哪個屬性值變化。
- deep:默認值是false,true發(fā)現(xiàn)對象內部值的變化即深層監(jiān)聽,(監(jiān)聽數(shù)組的變動不需要這么做)。
- immediate:立即以表達式的當前值觸發(fā)回調。true代表如果在 wacth里聲明了之后,就會立即先去執(zhí)行里面的handler方法,false就跟我們以前的效果一樣,在數(shù)據變化的時候才執(zhí)行,不會在綁定的時候就執(zhí)行。
Q1:監(jiān)聽對象中某一屬性值變化
- 監(jiān)聽obj.key
- 利用computed作為中間層,監(jiān)聽computed計算得到的值,就可以只監(jiān)聽對象中的某一屬性變化從而做出相應操作
computed: { newvalue(){ return this.b.value } }, watch: { newvalue(val, oldVal){ console.log("b.value: "+val, oldVal); }, }
Q2:深層監(jiān)聽的理解
監(jiān)聽器會一層層的往下遍歷給對象的所有屬性都加上了這個監(jiān)聽器
四、v-for中key的作用
key的作用是"唯一標識" ,可以標志組件的唯一性,可以更高效的更新虛擬DOM。
vue的dom渲染是虛擬dom,數(shù)據發(fā)生變化時,diff算法會只比較更改的部分,如果數(shù)據項的順序被改變,Vue將不是移動DOM元素來匹配數(shù)據項的改變,而是簡單復用此處每個元素。
加上key值后,當VUE節(jié)點發(fā)生變化的時候可以通過key值來識別相同的節(jié)點,更高效率更新DOM。
參考可見:http://chabaoo.cn/article/178628.htm
五、$nextTick的作用
在下次 DOM 更新循環(huán)結束之后執(zhí)行延遲回調。在修改數(shù)據之后立即使用這個方法,獲取更新后的 DOM。
解決的問題:有些時候在改變數(shù)據后立即要對dom進行操作,此時獲取到的dom仍是獲取到的是數(shù)據刷新前的dom,無法滿足需要,這個時候就用到了$nextTick。
// 修改數(shù)據 vm.msg = 'Hello' // DOM 還沒有更新 Vue.nextTick(function () { // DOM 更新了 })
六、$set
如果在實例創(chuàng)建之后添加新的屬性到實例上,它不會觸發(fā)視圖更新。Vue 不允許在已經創(chuàng)建的實例上動態(tài)添加新的根級響應式屬性。
使用 Vue.set(object, key, value)方法將響應屬性添加響應式對象,并確保這個新屬性同樣是響應式的,且觸發(fā)視圖更新。
解決:在vue中對一個對象內部進行一些修改時,vue沒有監(jiān)聽到變化無法觸發(fā)視圖的更新,此時來使用$set來觸發(fā)更新,使視圖更新為最新的數(shù)據。
【響應式:只有當實例被創(chuàng)建時中存在的屬性才是響應式的,或者說在data中存在的才能響應。
原因:由于 Vue 會在初始化實例時對屬性執(zhí)行 getter/setter 轉化,所以屬性必須在 data 對象上存在才能讓 Vue 將它轉換為響應式的?!?/p>
<template> <div> <p @click="addb(a)">{{a.b}}</p> <p @click="addc(a)">{{a.c}}</p> </div> </template> <script> export default { data(){ return { a: { b: 1 }, } }, methods: { addb(a) { a.b = a.b + 1; }, addc(a) { a.c = a.c + 1; console.log(a.c) }, }, mounted() { this.a.c = 200 //{{a.c}}不能主動觸發(fā)視圖更新故無法被渲染出來,當下一次視圖更新時才出現(xiàn) this.$set(this.a, 'c' ,200) //觸發(fā)視圖更新,{{a.c}}被渲染 } } </scirpt>
- this.a.c = 200:點擊b的數(shù)字才可以觸發(fā)視圖刷新,點擊c的數(shù)字console.log出來的c是變化的,但是視圖未更新還是原來的c
- this.$set(this.a, 'c' ,'200'):點擊c視圖變化,是最新的c
七、組件間的傳值
- props:父傳子
- $emit:子傳父
- eventbus:兄弟組件間
- vuex:
- $parent / $children / ref:
- provide / inject:
- Vue.observable:
- $attrs:
- $listeners:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
- 這篇文章主要介紹了Vue.js的高級面試題(附答案),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2020-01-13
- 這篇文章主要介紹了12道vue高頻原理面試題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-12-27
- 這篇文章主要介紹了Vuex面試題匯總(推薦),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-11-15
- 這篇文章主要介紹了web前端面試中關于VUE的面試題(含答案),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來2019-11-08
- 這篇文章主要介紹了面試必備的13道可以舉一反三的Vue面試題,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來2019-08-05
- 這篇文章主要介紹了Vue面試題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-07-01
- 這篇文章主要介紹了Vue 高頻基礎面試題,在前端面試中經常會遇到,今天小編特意整理分享到腳本之家平臺,需要的朋友可以參考下2020-02-12