記錄--Vue常問問題整合

来源:https://www.cnblogs.com/smileZAZ/archive/2022/06/29/16423634.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 一、談談你對MVVM的理解？ 映射關係簡化，隱藏controller MVVM在MVC的基礎上，把控制層隱藏掉了。 Vue不是一個MVVM框架，它是一個視圖層框架。 ViewModal是一個橋梁，將數據和視圖進行關聯。 二、談談你對Vue ...


這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

一、談談你對MVVM的理解？

映射關係簡化，隱藏controller MVVM在MVC的基礎上，把控制層隱藏掉了。

Vue不是一個MVVM框架，它是一個視圖層框架。

ViewModal是一個橋梁，將數據和視圖進行關聯。

二、談談你對Vue中響應式數據的理解？

數組和對象類型的值變化的時候，通過defineReactive方法，藉助了defineProperty，將所有的屬性添加了getter和setter。用戶在取值和設置的時候，可以進行一些操作。

缺陷：只能監控最外層的屬性，如果是多層的，就要進行全量遞歸。

get裡面會做依賴搜集（dep[watcher, watcher]） set裡面會做數據更新（notify，通知watcher更新）

三、Vue中如何檢測數組的變化？

vue中對數組沒有進行defineProperty，而是重寫了數組的7個方法。 分別是：

  • push
  • shift
  • pop
  • splice
  • unshift
  • sort
  • reverse

因為這些方法都會改變數組本身。

數組裡的索引和長度是無法被監控的。

四、Vue中如何進行依賴收集的？

Vue初始化的時候，掛載之後會進行編譯。生成renderFunction。

當取值的時候，就會搜集watcher，放到dep裡面。

當用戶更改值的時候，就會通知watcher，去更新視圖。

五、如何理解Vue中的模板編譯原理？

這個問題的核心是如何將template轉換成render函數。

  1. 將template模塊轉換成ast語法書 - parserHTML
  2. 對靜態語法做標記（某些節點不改變）
  3. 重新生成代碼 - codeGen,使用with語法包裹字元串

六、Vue生命周期鉤子是如何實現的?

Vue的生命周期鉤子是回調函數，當創建組件實例的過程中會調用相應的鉤子方法。 內部會對鉤子進行處理，將鉤子函數維護成數組的形式。

七、Vue組件生命周期有哪些？

  • beforeCreate 在實例初始化之後，數據觀測observer 和event、watcher事件配置之前被調用
  • created 實例已經創建完成，在這一步，以下配置被完成
    • 數據觀測
    • 屬性和方法的運算
    • watch/event時間回調
    • $el尚未生成
  • beforeMount 在掛載之前被調用，render尚未被調用
  • mounted el被新創建的vm.$el替換，並掛載到實例上去之後調用
  • beforeUpdate 數據更新時，被調用，發生在虛擬Dom重新渲染和打補丁之前
  • update 由於數據更改導致的虛擬Dom重新渲染和打補丁，在這之後調用
  • beforeDestroy 實例銷毀之前調用
  • destroyed 實例銷毀之後調用，調用後Vue實例的所有東西都會被解綁，所有的事件監聽會被移除，子實例被銷毀，該鉤子在服務端渲染期間不被調用
  • keep-alive（activated & deactivated）

八、vue.mixin的使用場景和原理?

Vue的mixin的作用就是抽離公共的業務邏輯，原理類似對象的繼承，當組件初始化的時候，會調用mergeOptions方法進行合併，採用策略模式針對不同的屬性進行合併。 如果混入的數據和本身組件的數據有衝突，採用本身的數據為準。

缺點：命名衝突、數據來源不清晰

九、Vue的組件data為什麼必須是一個函數?

new Vue是一個單例模式，不會有任何的合併操作，所以根實例不必校驗data一定是一個函數。 組件的data必須是一個函數，是為了防止兩個組件的數據產生污染。 如果都是對象的話，會在合併的時候，指向同一個地址。 而如果是函數的時候，合併的時候調用，會產生兩個空間。

十、請說明nextTick的原理。

nextTick是一個微任務。

  • nextTick中的回調是在下次Dom更新迴圈結束之後執行的延遲回調
  • 可以用於獲取更新後的Dom
  • Vue中的數據更新是非同步的，使用nextTick可以保證用戶定義的邏輯在更新之後執行

十一、computed和watch的區別是什麼？

  • computed和watch都基於watcher來實現的。
  • computed的屬性是具備緩存的，依賴的值不發生變化，對其取值時計算屬性方法不會重覆執行
  • watch是監控值的變化，當值發生改變的時候，會調用回調函數

十二、Vue.set方法是如何實現的？

  • vue給對象和數組本身都增加了dep屬性
  • 當給對象新增不存在的屬性的時候，就會觸發對象依賴的watcher去更新
  • 當修改數組索引的時候，就調用數組本身的splice方法去更新數組

十三、Vue為什麼要用虛擬Dom

  • 虛擬dom就是用js對象來描述真實Dom，是對真實Dom的抽象
  • 由於直接操作Dom性能低，但是js層的操作效率高，可以將Dom操作轉化成對象操作。最終通過diff演算法比對差異進行更新Dom
  • 虛擬Dom不依賴真實平臺環境，可以實現跨平臺

十四、Vue的diff演算法原理是什麼？

Vue的diff演算法是平級比較，不考慮跨級比較的情況。內部採用深度遞歸的方式+雙指針方式比較

  • 先比較兩個節點是不是相同節點
  • 相同節點比較屬性，復用老節點
  • 先比較兒子節點，考慮老節點和新節點兒子的情況
  • 優化比較：頭頭、尾尾、頭尾、尾頭
  • 比對查找，進行復用

十五、既然vue通過數據劫持可以精準的探測數據變化，為什麼還要進行diff檢測差異？

  • 響應式數據變化，Vue確實可以在數據變化的時候，響應式系統可以立刻得知。但是如何每個屬性都添加watcher的話，性能會非常的差。
  • 粒度過細，會導致更新不精準

所以採用watcher + Diff演算法來檢測差異。

十六、請說明key的作用和原理

  • Vue在patch過程中，通過key可以判斷兩個虛擬節點是否是相同節點。
  • 沒有key會導致更新的時候出問題
  • 儘量不要採用索引作為key

十七、談談對組件的理解

  • 組件化開發能大幅提高應用開發效率、測試性、復用性
  • 常用的組件化技術：屬性、自定義事件、插槽
  • 降低更新範圍，值重新渲染變化的組件
  • 高內聚、低耦合、單向數據流

十八、請描述組件的渲染流程

產生組件虛擬節點 -> 創建組件的真實節點 -> 插入到頁面

十九、請描述組件的更新流程

屬性更新會觸發patchVnode方法，組件的虛擬節點會調用prepatch鉤子，然後更新屬性，更新組件。

二十、非同步組件原理

先渲染非同步占位符節點 -> 組件載入完畢後調用forceUpdate強制更新。

二十一、函數組件的優勢和原理

  • 函數式組件的特性：無狀態、無生命周期、無this。因此性能會高一點。

正常的一個組件是一個類繼承了Vue。

函數式組件，就是一個普通的函數。

二十二、組件的傳值方式有哪些？

  1. props和emit:父組件向子組件傳遞數據，通過prop傳遞。子組件傳遞數據給父組件是通過emit: 父組件向子組件傳遞數據，通過prop傳遞。子組件傳遞數據給父組件是通過emit:父組件向子組件傳遞數據，通過prop傳遞。子組件傳遞數據給父組件是通過emit事件
  2. parent,parent,parent,children獲取當前組件的父組件和當前組件的子組件
  3. attrs和attrs和attrs和listeners 。
  4. 父組件通過provide提供，子組件通過inject註入變數
  5. $ref獲取實例
  6. eventBus平級組件數據傳遞
  7. Vuex

二十三、$attrs是為瞭解決什麼問題出現的？

主要作用是為了實現批量傳遞數據。

provide/inject更適合應用在插件中，主要實現跨級數據傳遞。

二十四、v-for和v-if哪個優先順序更高？

首先，v-for和v-if 不能在同一個標簽中使用。

先處理v-for，再處理v-if。

如果同時遇到的時候，應該考慮先用計算屬性處理數據，在進行v-for，可以減少迴圈次數。

二十五、v-mode是如何實現的？

在組件上用的v-model，是model和callback

在普通元素上用v-model，會生成指令，還可能因為不同的元素：

  • 生成value和input
  • 生成change和radio
  • 生成change和checked

 指令在什麼時候會調用？

 

 源碼：

二十六、Vue的普通Slot以及作用域Slot的區別

普通插槽

普通插槽是渲染後做替換的工作。父組件渲染完畢後，替換子組件的內容。

 在模板編譯的時候，處理組件中的子節點和slot標簽

 在創建元素的時候，用_t()方法方法來替換_v()的內容。

作用域插槽

作用域插槽可以拿到子組件裡面的屬性。在子組件中傳入屬性然後渲染。

 

 作用域插槽的編譯結果：

 

二十八、Vue.use是乾什麼的？

Vue.use是用來使用插件的。我們可以在插件中擴展全局組件、指令、原型方法等。 會調用install方法將Vue的構建函數預設傳入，在插件中可以使用vue，無需依賴vue庫

二十九、組件寫name有啥好處？

  • 增加name屬性，會在components屬性中增加組件本身，實現組件的遞歸調用。
  • 可以表示組件的具體名稱，方便調試和查找對應的組件。

三十、vue的修飾符有哪些？

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive
  • .right
  • .center
  • .middle
  • .alt

三十一、如何理解自定義指令？

  • 在生成ast語法樹時，遇到指令會給當前元素添加directives屬性
  • 通過genDirectives生成指令代碼
  • 在patch前，將指令的鉤子提取到cbs中，在patch過程中調用對應的鉤子
  • 當執行cbs對應的鉤子時，調用對應指令定義方法

三十二、keep-alive平時在哪裡使用？原理是什麼？

  • 使用keep-alive包裹動態組件時，會對組件進行緩存，避免組件重新創建

使用有兩個場景，一個是動態組件，一個是router-view

 

 這裡創建了一個白名單和一個黑名單。表明哪些需要需要做緩存，哪些不需要做緩存。以及最大的緩存個數。

緩存的是組件的實例，用key和value對象保存。

載入的時候，監控include和exclude。

如果不需要緩存，直接返回虛擬節點。

如果需要緩存，就用組件的id和標簽名，生成一個key，把當前vnode的instance作為value，存成一個對象。這就是緩存列表

如果設置了最大的緩存數，就刪除第0個緩存。新增最新的緩存。

並且給組件添加一個keepAlive變數為true，當組件初始化的時候，不再初始化。

三十三、vue-router有幾種鉤子函數？執行流程如何？

鉤子函數有三種：

  • 全局守衛
  • 路由守衛
  • 組件守衛

三十四、vuerouter的兩種模式的區別

  • vue-router中有三種模式，分別是hash、history、abstract
  • abstract在不支持瀏覽器的API換景使用
  • hash模式相容性好，但是不美觀，不利於SEO
  • history美觀，historyAPI+popState，但是刷新會出現404

三十五、談談Vue的性能優化有哪些？

  • 數據層級不要過深，合理的設置響應式數據
  • 使用數據時，緩存值的結果，不頻繁取值
  • 合理設置key
  • v-show(頻繁切換性能高)和v-if的合理使用
  • 控制組件的粒度 -> Vue採用組件級別更新
  • 採用函數式組件 -> 函數式組價開銷低
  • 採用非同步組件 -> 藉助webpack的分包策略
  • 使用keep-alive來緩存組件
  • 虛擬滾動、時間分片等策略
  • 打包優化

三十六、談談你對Vuex的理解？

Vuex是專門為vue提供的全局狀態管理系統，用於多個組件中的數據共用、數據緩存。

問題：無法持久化。

  • mutation 主要修改狀態，同步執行
  • action 執行業務代碼，方便復用，邏輯可以為非同步。不能直接修改狀態。

三十七、vue中使用了哪些設計模式？

  • 單例模式：new多次，只有一個實例

  • 工場模式：傳入參數就可以創建實例（虛擬節點的創建）
  • 發佈訂閱模式：eventBus
  • 觀察者模式：watch和dep
  • 代理模式：_data屬性、proxy、防抖、節流
  • 中介者模式：vuex
  • 策略模式
  • 外觀模式

本文轉載於:

https://juejin.cn/post/7043074656047202334

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • LVGL庫入門教程 - 動畫
    使用磁碟空間過程 分區：毛坯房 格式化：配置創建文件系統（裝修） 掛載：把分區和文件系統進行組裝 Linux一切皆文件：通過文件的方式來管理磁碟 linux一切皆文件，所以磁碟也表現為文件。每個硬碟文件命名方式和磁碟的類型有關。硬碟文件在內核中自動生成識別，並存放在/dev這個文件下麵。 lvm：邏 ...
  • Flink-基於 DataStream API 實現欺詐檢測
    案例來源於 https://nightlies.apache.org/flink/flink-docs-release-1.14/docs/try-flink/datastream/ 案例背景 在當今數字時代，信用卡欺詐行為越來越被重視。 罪犯可以通過詐騙或者入侵安全級別較低系統來盜竊信用卡卡號。 ...
  • MySQL主從備庫過濾參數分析和測試
    測試環境： GTID的主從複製，主庫（9900）——》備庫（9909），存在測試庫表： 9900_db1庫：t1、t2、t3、t4、t5表 9900_db2庫：t6、t7、t8、t9、t10表 1、replicate-do-db參數： --replicate-do-db=name，只同步指定的資料庫 ...
  • 阿裡雲體驗有獎：使用PolarDB-X與Flink搭建實時數據大屏
    體驗簡介 場景將提供一臺配置了CentOS 8.5操作系統的ECS實例（雲伺服器）。通過本教程的操作帶您體驗如何使用PolarDB-X與Flink搭建一個實時數據鏈路，模擬阿裡巴巴雙十一GMV大屏。 實驗準備 1. 創建實驗資源 開始實驗之前，您需要先創建ECS實例資源。 在實驗室頁面，單擊創建資源 ...
  • Gradle連載7-配置簽名
    一、配置簽名信息 /** * 1.testApplicationId用於配置測試App的包名，預設情況下是applicationId + ".test".一般情況下預設即可，他也是 * ProductFlavor的一個屬性，方法原型為 * public ProductFlavor setTestAp ...
  • HMS Core打造影音娛樂行業解決方案，助推視聽新浪潮
    6月28日，HDD·HMS Core. Sparkle影音娛樂線上沙龍在各大直播平臺與開發者們見面。本次線上沙龍圍繞影音娛樂行業現狀觀察和趨勢、用戶數據洞察分析以及HMS Core影音娛樂行業解決方案等多個話題展開，與開發者共同探討如何打造豐富有趣的影音娛樂體驗。 音視頻逐漸成為大眾化的表達語言，與 ...
  • Yarn的使用
    yarn 由於yarn的全局安裝位置與npm不同，所以要配置yarn的全局安裝路徑到環境變數中，否則全局安裝的包不起作用具體操作如下 咱裝 yarn 分別執行 yarn global命令， yarn global bir 命令 將上述兩步返迴路徑配置到電腦環境中變變數中即可 xxxx 表示要安裝的東 ...
  • AntDesignVue --tree 樹形插件自定義圖標
    AntDesignVue --tree 樹形插件自定義圖標。 index.vue樹形區域的代碼如下，重點就是①那個“showIcon” 參數要等於“true”；②寫幾個img標簽顯示你自定義的圖標，img標簽加“slot”屬性。 <a-tree showIcon="true" showLine > ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類