1.深拷貝和淺拷貝的區別
淺拷貝:創建一個新對象,將原對象的屬性值復制到新對象中,如果某個屬性是引用類型(如對象、數組等),那么復制的就是引用地址,新對象和原對象共享該屬性。
深拷貝:創建一個新對象,遞歸地將原對象的每個屬性值復制到新對象中,包括引用類型屬性,新對象和原對象互不影響。
2.節流和防抖
二者有什么區別:
防抖:當一個動作連續觸發,只執行最后一次。通俗來說,就是防止抖動,“你先抖動著,啥時候停了,在執行下一步”,例如一個搜索輸入框,等輸入停止之后,再出發搜索。
防抖代碼:
function throttle(fn, delay) { let last = 0; // 記錄上一次觸發的時間 return function () { let now = +new Date(); // 當前時間 if (now - last >= delay) { // 如果當前時間與上次觸發時間的間隔大于delay,執行fn last = now; fn.apply(this, arguments); } }; }
輸入框防抖實現html: <template> <div> 輸入框: <input id="input1"/> </div> </template>
js:
<script> export default { name: 'FangDou', data() { return { }; }, mounted() { const input1 = document.getElementById('input1') input1.addEventListener('keyup',this.debounce(()=>{ console.log('發起搜索',input1.value) },200)) }, methods: { debounce(fn,delay=200){ let timer = 0 return function(){ if(timer) clearTimeout(timer) timer = setTimeout(()=>{ fn.apply(this,arguments) timer = 0 },delay) } } }, }; </script>
節流:限制一個動作在一段時間內只能執行一次。節省交互溝通。流不一定指流量?!皠e急,一個一個來,按照時間節奏來,插隊者無效”。
鼠標拖拽節流的代碼實現html: <template> <div> <div id="div1" draggable="true" style="width:100px;height:100px;background:#bfa;text-align:center;line-height:100px">可拖拽</div> </div> </template>
<script> export default { name: 'JieLiu', data() { return { }; }, mounted() { const div1 = document.getElementById('div1') div1.addEventListener('drag', this.throttle((e) => { console.log('鼠標拖拽的位置:', e.offsetX, e.offsetY) }, 100)) }, methods: { // 節流 throttle(fn, delay = 200) { let timer = 0 return function () { if (timer) return timer = setTimeout(() => { fn.apply(this, arguments) timer = 0 }, delay); } } }, }; </script>
節流與防抖的區別是:
(1)節流限制執行頻率,有節奏的執行;
(2)防抖限制執行次數,多次密集的出發只執行一次;
(3)節流關注過程,防抖關注結果。
3.介紹下promise
Promise 是 JavaScript 的異步編程解決方案,可以避免回調地獄,提供了鏈式調用、錯誤捕獲及狀態管理。一個 Promise 對象代表一個還沒有完成但預期將來會完成的操作,有三個狀態:Pending(進行中)、Fulfilled(已成功)與 Rejected(已失?。?/p>
4.vue中的權限
Vue 中的權限通常是通過自定義指令、路由守衛等方式來實現。自定義指令可以指定特定角色的用戶才能操作界面元素,路由守衛則可以用于控制用戶是否有權限訪問某個頁面。
5.介紹下git
Git 是一種分布式版本控制系統,可在多人協作過程中追蹤代碼的更改歷史和合并沖突。主要命令包括:`git init`創建倉庫,` git checkout `切換分支,`git pull`自動抓取數據下來,然后將遠端分支自動合并到本地倉庫中當前分支,`git push`提交到服務器,`git merge dev`解決沖突,`git add`添加內容,`git commit`提交更改,`git status`查看狀態,`git log`查看提交記錄等。
6.Vue 中組件傳值方式:
(1)父組件給子組件傳值用props,$parent
(2)子組件給父組件傳值用$emit,$refs(vue3),$children(vue2)
(3)不相關的組件通信用event自定義事件
(4)$attrs用于接收沒有被接收的屬性和方法,本質上是props和$emit的候補
(5)多層級組件之間傳值可以用provide(產生數據)和inject(使用數據)
(6)全局組件:全局事件總線eventBus和vuex
7.Vue 內存泄漏可能原因
- 組件銷毀時未取消定時器。
- 長列表數據沒有使用虛擬滾動加載。
- 使用閉包緩存數據時未釋放。
- 對象屬性或數組元素被多次引用。
防止內存泄漏的方法:
- 在組件銷毀時,取消所有與該組件相關的事件監聽、定時器。
- 使用虛擬滾動庫,如 vue-virtual-scroller。
- 謹慎使用閉包緩存數據,確保數據在不需要時能被垃圾回收。
- 深拷貝或淺拷貝時嚴格控制對象屬性與數組元素的引用關系。
浙公網安備 33010602011771號