VUE知識體系、VUE面試題

来源:https://www.cnblogs.com/Scholars/p/18162191
-Advertisement-
Play Games

1. computed(計算屬性)和方法有什麼區別? 計算屬性本質上是包含 getter 和 setter 的方法 當獲取計算屬性時,實際上是在調用計算屬性的 getter 方法。vue 會收集計算屬性的依賴,並緩存計算屬性的返回結果。只有當依賴變化後才會重新進行計算。 方法沒有緩存,每次調用方法都 ...


1. computed(計算屬性)和方法有什麼區別?

計算屬性本質上是包含 getter 和 setter 的方法

當獲取計算屬性時,實際上是在調用計算屬性的 getter 方法。vue 會收集計算屬性的依賴,並緩存計算屬性的返回結果。只有當依賴變化後才會重新進行計算。

方法沒有緩存,每次調用方法都會導致重新執行。

計算屬性的 getter 和 setter 參數固定,getter 沒有參數,setter 只有一個參數。而方法的參數不限。

由於有以上的這些區別,因此計算屬性通常是根據已有數據得到其它數據,併在得到數據的過程中不建議使用非同步、當前時間、隨機數等副作用操作。

實際上,它們最重要的區別是含義上的區別。計算屬性含義上也是一個屬性(data 屬性),可以讀取也可以賦值;方法含義上是一個操作,用於處理一些事情。

 

2. v-if和v-show有什麼區別?

v-if 能夠控制是否生成 vnode(虛擬dom樹),也就間接控制了是否生成對應dom。當 v-if 為 true 時,會生成對應 vnode,並生成對應的 dom 元素;當其為 false 時,不會生成對應 vnode,自然不會生成任何 dom 元素。v-if 是組件真正的渲染和銷毀,而不是顯示和隱藏

v-show 始終會生成 vnode,也就間接導致了始終生成 dom。它只是控制 dom 的 display 屬性,當 v-show為 true 時,不做任何處理;當其為 false 時,生成的 dom 的 dispaly 屬性為 none。v-show 是 CSS display 控制顯示和隱藏

使用 v-if 可以有效的減少樹的節點和渲染量,但也會導致樹的不穩定;而使用 v-show 可以保持樹的穩定,但不能減少樹的節點和渲染量。

vue渲染節點越少效率越高,樹越穩定效率越高。v-if節點少但樹不穩定,v-show節點多但樹穩定。

因此,在實際開發中,顯示狀態變化頻繁的情況下應使用 v-show,以保持樹的穩定;顯示狀態變化少時應該使用 v-if,以減少樹的節點和渲染量。

 

3. 為何 v-for 要用 key

必須要用 key, 而且不能用 index 和 random,

key 是 vue 中 vnode 的唯一標記,通過這個 key,我們的 diff 操作可以更準確,更快速

在 diff 演算法中用 tag 和 key 來判斷,是否是 sameNode

可以減少渲染次數,提高渲染性能

 


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

-Advertisement-
Play Games
更多相關文章
  • 隱私清單: <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"><pli ...
  • 一、什麼是雙向綁定 我們先從單向綁定切入單向綁定非常簡單,就是把Model綁定到View,當我們用JavaScript代碼更新Model時,View就會自動更新雙向綁定就很容易聯想到了,在單向綁定的基礎上,用戶更新了View,Model的數據也自動被更新了,這種情況就是雙向綁定舉個慄子 當用戶填寫表 ...
  • 原創研發uniapp+vue3+pinia2跨三端仿微信app聊天模板Uniapp-Wechat。 uni-vue3-wchat基於uni-app+vue3+pinia2+uni-ui+uv-ui等技術跨端仿製微信App界面聊天項目,支持編譯到H5+小程式端+App端。實現編輯框多行消息/emoj混 ...
  • 1.現象 當在vue中列印對象的時候會發現有一些屬性或者全部屬性都是顯示的...,點擊展開後才能看到真正的值是什麼. 2.原因 因為在vue中對象都是用了代理重寫了get,由於get重寫也就導致了瀏覽器不能直接獲取到具體的值,因此才會在列印的時候為...,手動點擊展開才顯示具體的值 3.想看具體的值 ...
  • 項目結構 在開發Chrome插件時,以下幾個文件的作用如下: manifest.json:這是Chrome插件的清單文件,用於配置插件的基本信息、許可權、頁面跳轉等。其中包括插件的名稱、版本號、圖標、後臺腳本、瀏覽器動作等信息。 background.js:這是Chrome插件的後臺腳本文件,用於處理 ...
  • DevTools 非常強大除了常用的查看元素,進行斷點調試或許還有些你不知道的小技巧,小功能。如可以快速的重新發送請求,快速選擇元素,在控制臺中使用npm庫等,讓你能夠更加高效的進行開發。不定時更新~ ...
  • 大家好,我是 Java陳序員。 在日常的工作生活中,我們經常會遇到應付各類強制要求轉發朋友圈的行為,或者是朋友圈集贊的行為。 今天,給大家介紹一個工具,可以幫助你生成朋友圈轉發截圖。 關註微信公眾號:【Java陳序員】,獲取開源項目分享、AI副業分享、超200本經典電腦電子書籍等。 項目介紹 We ...
  • 拖放功能,即將一個元素從一個區域,通過拖拽,放置到另一個區域。常見的應用是將文件或圖片從一個區域,拖放到另一個區域。中文常常把這表述成拖拽,實際上拖拽的描述並不准確,應該叫拖放,因為drag事件和drop事件是成對使用的,即拖拽和放置。 drag在拖拽動作發生時觸發,攜帶被拖拽元素的信息,drop在 ...
一周排行
    -Advertisement-
    Play Games
  • .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...
  • 目錄前言PostgreSql安裝測試額外Nuget安裝Person.cs模擬運行Navicate連postgresql解決方案Garnet為什麼要選擇Garnet而不是RedisRedis不再開源Windows版的Redis是由微軟維護的Windows Redis版本老舊,後續可能不再更新Garne ...
  • C#TMS系統代碼-聯表報表學習 領導被裁了之後很快就有人上任了,幾乎是無縫銜接,很難讓我不想到這早就決定好了。我的職責沒有任何變化。感受下來這個系統封裝程度很高,我只要會調用方法就行。這個系統交付之後不會有太多問題,更多應該是做小需求,有大的開發任務應該也是第二期的事,嗯?怎麼感覺我變成運維了?而 ...
  • 我在隨筆《EAV模型(實體-屬性-值)的設計和低代碼的處理方案(1)》中介紹了一些基本的EAV模型設計知識和基於Winform場景下低代碼(或者說無代碼)的一些實現思路,在本篇隨筆中,我們來分析一下這種針對通用業務,且只需定義就能構建業務模塊存儲和界面的解決方案,其中的數據查詢處理的操作。 ...
  • 對某個遠程伺服器啟用和設置NTP服務(Windows系統) 打開註冊表 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\TimeProviders\NtpServer 將 Enabled 的值設置為 1,這將啟用NTP伺服器功 ...
  • title: Django信號與擴展:深入理解與實踐 date: 2024/5/15 22:40:52 updated: 2024/5/15 22:40:52 categories: 後端開發 tags: Django 信號 松耦合 觀察者 擴展 安全 性能 第一部分:Django信號基礎 Djan ...
  • 使用xadmin2遇到的問題&解決 環境配置: 使用的模塊版本: 關聯的包 Django 3.2.15 mysqlclient 2.2.4 xadmin 2.0.1 django-crispy-forms >= 1.6.0 django-import-export >= 0.5.1 django-r ...
  • 今天我打算整點兒不一樣的內容,通過之前學習的TransformerMap和LazyMap鏈,想搞點不一樣的,所以我關註了另外一條鏈DefaultedMap鏈,主要調用鏈為: 調用鏈詳細描述: ObjectInputStream.readObject() DefaultedMap.readObject ...
  • 後端應用級開發者該如何擁抱 AI GC?就是在這樣的一個大的浪潮下,我們的傳統的應用級開發者。我們該如何選擇職業或者是如何去快速轉型,跟上這樣的一個行業的一個浪潮? 0 AI金字塔模型 越往上它的整個難度就是職業機會也好,或者說是整個的這個運作也好,它的難度會越大,然後越往下機會就會越多,所以這是一 ...
  • @Autowired是Spring框架提供的註解,@Resource是Java EE 5規範提供的註解。 @Autowired預設按照類型自動裝配,而@Resource預設按照名稱自動裝配。 @Autowired支持@Qualifier註解來指定裝配哪一個具有相同類型的bean,而@Resourc... ...