web前端面試題@三(子組件修改父組件傳遞的值、swiper常見問題、虛擬DOM和diff算法)

一、子組件能不能修改父組件傳遞過來的數(shù)據(jù)?

? ? ? ? 答案是必然的!而且還有很多種~,

? ? ? ? 第一種??是直接在子組件中通過this.$parent.event來調(diào)用父組件的方法。具體實現(xiàn)是在父組件定義一個修改數(shù)據(jù)的方法,然后在子組件里定義一個方法,在子組件的方法中通過"this.$parent.父組件方法名"達到調(diào)用父組件方法的目的。

? ? ? ? 第二種是在子組件里用$emit向父組件觸發(fā)一個事件,父組件監(jiān)聽這個事件就行了。具體實現(xiàn)是通過在父組件里面的子組件標簽內(nèi)定義自定義方法"@自定義方法名:父組件的方法名",子組件中通過"this.$emit('自定義的方法名')"來調(diào)用父組件中的方法。

? ? ? ? 第三種是父組件把方法傳入子組件中,在子組件里直接調(diào)用這個方法,在子組件的方法里面直接通過" this.父組件的方法名()"調(diào)用,簡單粗暴,但是容易出問題

? ? ? ? ?第四種是先將值傳遞給子組件,子組件 props 接收并修改,然后通過"this.$emit('自定義的方法名',子組件修改完傳回去的數(shù)據(jù))"廣播一個事件給父組件,并將值一并傳遞,父組件 @子組件廣播過來的事件,并定義一個方法,在該方法中,改變傳遞過來的值,父組件又會將值傳遞給子組件,這樣就形成了一個閉環(huán),ok成功修改~

? ? ? ? 第五種是在子組件的data中定義一個新屬性接收父組件傳過來的數(shù)據(jù),直接改變新屬性。

? ? ? ? 第六種是通過計算屬性來更改數(shù)據(jù)

二、swiper獲取數(shù)據(jù)、css都沒有問題,但是圖片不動,應(yīng)該怎么解決?

? ? 原因:swiper滑動失效的原因是因為swiper的初始化在數(shù)據(jù)加載之前完成了。因為swiper提前初始化了,那個時候還沒有數(shù)據(jù),當數(shù)據(jù)調(diào)出來時已經(jīng)沒用了,通俗的來說就是異步了。

? ? 解決辦法:

? ? ? ? 第一種在數(shù)據(jù)調(diào)用結(jié)束后再進行swiper初始化。實現(xiàn)原理,通過vue自帶的nextTick方法,它會在數(shù)據(jù)變化以后,DOM更新以后進行回調(diào)函數(shù)。把輪播圖放在回調(diào)里就解決了。

? ? ? ? 第二種在swiper初始化的時候加上兩個屬性(observer:true、observeParents:true)。原理是如果不是輪播的情況下呢,直接在初始化時加上observer(修改swiper自己或子元素時,自動初始化swiper)、observeParents(修改swiper的父元素時,自動初始化swiper)這兩個參數(shù)就行了,會在數(shù)據(jù)變化時,再幫你初始化一次

? ? ? ? 第三種是加載組件時加v-if判斷——??!【推薦】!!。原理是通過雙向數(shù)據(jù)綁定,給他綁定一個空數(shù)組,判斷這個數(shù)組如果有數(shù)據(jù)或者length>1的時候,在渲染。

三、詳述虛擬DOM中的diff算法~

? ? ? ? 這個問題純屬個人簡單分析,參考即可。。。。不是抄襲啊!

? ? ? ? 首先,我們要知道diff大概是啥?Diff算法是Vue視圖動態(tài)改變的核心算法之一。簡單的來說Diff算法就是尋找兩個Vnode樹之間差異的算法。

? ? ? ? 然后,通過看其他博客和簡書中理解大致的流程為:

? ? ? ? 可以理解為有舊的Vnode數(shù)組和新的Vnode數(shù)組這兩個數(shù)組

????????然后有四個變量充當指針分別指到兩個數(shù)組的頭尾

????????重復(fù)下面的對比過程,直到兩個數(shù)組中任一數(shù)組的頭指針超過尾指針,循環(huán)結(jié)束

????????對比兩個數(shù)組的頭部,如果找到,把新節(jié)點patch到舊節(jié)點,頭指針后移

????????對比兩個數(shù)組的尾部,如果找到,把新節(jié)點patch到舊節(jié)點,尾指針前移

????????然后互相交叉對比,舊尾新頭,如果找到,把新節(jié)點patch到舊節(jié)點,并插入到正確位置,舊尾指針前移,新頭指針后移

????????繼續(xù)互相交叉對比,舊頭新尾,如果找到,把新節(jié)點patch到舊節(jié)點,并插入到正確位置,新尾指針前移,舊頭指針后移

????????都沒有,開始用新指針對應(yīng)節(jié)點的key去舊數(shù)組中直接找

????????????1.如果沒有key,創(chuàng)建新的節(jié)點

????????????2.如果有key并且是相同的節(jié)點,把新節(jié)點patch到舊節(jié)點,并插入到正確位置

????????????3.如果有key但是不是相同的節(jié)點,創(chuàng)建新節(jié)點

????????循環(huán)結(jié)束后,

????????1.先對比舊數(shù)組的頭尾指針,如果舊數(shù)組遍歷完了(可能新數(shù)組沒遍歷完,有漏添加的問題),添加新數(shù)組中漏掉的節(jié)點

????????2.再對比新數(shù)組的頭尾指針,如果新數(shù)組遍歷完了(可能舊數(shù)組沒遍歷完,有漏刪除的問題),刪除舊數(shù)組中漏掉的節(jié)點

?大概就是這個意思,不過關(guān)于diff算法還有好多知識,參考即可,對與不對交給四哥,四哥給說法~~


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容