vue - vue基礎/vue核心內容（2）

来源:https://www.cnblogs.com/heymar/archive/2022/05/02/16217362.html
-Advertisement-
Play Games

今天的內容書接上回，同樣是vue的核心基礎部分，今天偏向於理論性，特別是vue對於數據對象的監測那一塊，剛開始琢磨了半天，這股勁一過，現在好理解多了 10.watch和computed對比 計算屬性案例（watch來做） 在增加一條需求輸入姓後要反應一秒後再響應 computed 區別 : comp ...


今天的內容書接上回，同樣是vue的核心基礎部分，今天偏向於理論性，特別是vue對於數據對象的監測那一塊，剛開始琢磨了半天，這股勁一過，現在好理解多了

10.watch和computed對比

計算屬性案例（watch來做）

image-20220502094002770

在增加一條需求輸入姓後要反應一秒後再響應

image-20220502094249940

computed

image-20220502094916097

區別 :

  • computed能完成的功能，watch都可以完成
  • watch可以完成的功能，computed不一定能完成，就比如watch這裡可以非同步操作，computed就不行，因為computed裡面我們靠的就是那個返回值讓他的getter返回值就會等於fullname這個計算屬性，所以如果返回值給了定時器，那麼我的fullname就沒有得到返回值，但是watch不一樣，watch是對值做操作，在定時器裡面就已經完成了賦值的操作，不需要你返回給我

註意 :

  • 前面都說被vue所管理的函數最好別寫箭頭函數，但是這裡的定時器必須寫為箭頭函數，因為如果是普通函數那麼他的this就為window，定時器的this本身就是為window，但是如果這裡是箭頭函數，都知道，箭頭函數的this是定義它位置的地方的this，所以就是監視這個屬性裡面的this就是vm實例
  • 被vue所管理的函數最好寫成普通函數，不被vue所管理的函數（定時器、ajax回調、promise的回調）最好寫成箭頭函數

11.綁定class樣式

  • 字元串寫法，適用於：樣式類名不確定，需要動態指定

    註意一下這裡的生成隨機整數是怎麼的寫法

image-20220502103751418

  • 數組寫法：適用於：個數不確定，類名也不確定的時候，個數我以後 可能有一百個可能有幾個，名字可能叫這個可能叫那個

    image-20220502111554149

  • 對象寫法：適用於個數確定，類名也確定，我只有這兩個，也只叫這個名字

    image-20220502111752617

  • 綁定style樣式（瞭解）這是對象寫法，同樣也有數組寫法，就是fontsize寫在這個對象，background寫在那個對象，數組寫法就是將兩個對象結合起來【obj1，obj2】

    image-20220502114119586

12.條件渲染

控制元素的隱藏顯示

image-20220502115318542

全新指令語法：v-show、v-if他們兩個都可以實現顯示隱藏，v-show底層實現是display：none，v-if直接把元素都刪沒了，所以當我們需要頻繁切換顯示隱藏的時候建議v-show

案例：

image-20220502115658200

image-20220502115907897

v-else-if跟v-if是一組的判斷，如果前面達成條件後面就不再做判斷

image-20220502120013903

v-else 註意v-else後面就不跟條件了直接寫上v-else，出了條件外的都顯示他

註意v-if判斷是一個整體，包括else if、else，中間不能寫其他的來打斷

image-20220502120331959

v-if與template配合使用

我要完成這麼一個界面當點擊達到1的時候顯示出來

image-20220502120749720

這種做法是不是有點冗餘，每個都要去判斷一下，所以就有一個標簽template，只能配合v-if使用，它最大的好處就是不會影響頁面標簽佈局

image-20220502121001331

image-20220502120940070

13.列表渲染

全新指令語法v-for

  • 遍曆數組

image-20220502143214849

首先用了v-for我們有多少數據，就自動會遍歷出多少li，然後v-for每個li是必須配置一個:key的動態屬性的，我們的遍歷可以寫多個參數，寫多少個的時候前面表示這個對象，後面表示這個對象在數組裡面的索引號，而我們的key就可以配置為p.id或者是index這個索引號

image-20220502143739139

  • 遍歷對象

    遍歷對象要註意，遍歷的值和我們的數據是反的，前面是我們的數據，後面變成了值，而且遍歷對象，key就為這個屬性名，

    v-for除了可以用in 用 of也是一樣的效果

    image-20220502144708887

  • 遍歷字元串

    字元串就是可以把每一個字元遍歷出來，前面是值，後面是下標

    image-20220502145121719

  • 遍歷指定次數（不常用）

    image-20220502145319747

    image-20220502145253535

13.1 key作用與原理（面試）

首先要知道我們動態生成的key並不是拿在頁面上來呈現的，可以看到最終生成的真實DOM是沒有這個屬性的，它是用來vue拿來用的

當我們用index作為key的值會出現的問題：

有一個需求當我們點擊按鈕會在上面新增條數據老六

image-20220502151644843

image-20220502151717954

image-20220502151730657

是不是就出現問題了，分析一下下麵這個圖就知道問題在哪了

image-20220502151527517

這個就是我們前面所說的vue的一大優點，虛擬DOM加Diff演算法，就在這裡體現了。首先我們初始化的數據，打開網頁vue會先在記憶體生成虛擬DOM，同時key是我們的index，然後正常將虛擬DOM轉為真實DOM，轉到頁面上來了，我們正常在input框輸入內容，這個時候我們去點擊新增老六這個按鈕，相當於讓數據變成了我們的新數據樣式，然後又會在記憶體生成虛擬DOM，這個時候由於是第二次生成了，所以Diff演算法就來了，vue會拿我們新的虛擬dom和舊的虛擬dom進行比較，而比較的依據就是key，當我們比較第一條數據的時候，key對上了之後，先去比較文本發現文本不一樣，那麼就不能復用，就會以新的虛擬dom為準，接著回去比較input標簽，註意這個時候比較input標簽會發現是一樣的，為什麼，因為都是input標簽，都是text格式，我們在裡面輸入的內容實在真實dom輸入的跟虛擬dom沒有關係，所以比較出來是一樣的，既然一樣我就可以去key=0，以前已經生成過真實dom了吧，那我就直接去拿來複用了，所以最終形成的結果就是，新增的文本就上我們舊的input，以此類推，所以就導致了我們最終呈現的效果有問題

這是用index作為key的問題一，還有一個問題就是效率變低了，為什麼，因為我們原來本來可以復用的數據，他給我重新生成了真實dom肯定效率低了

當我們用id作為key時

image-20220502153008703

首先比較key=004發現沒有，沒有那就直接新增，後面的都發現有，而且數據也對的上那就直接復用

開發中如何選擇key

  • 最好是用每條數據的唯一標識（id、手機號、身份證號、學號等）
  • 如果不存在對數據的逆序添加、逆序刪除等破壞順序的操作，或者渲染列表僅用於展示（沒有新增刪除），使用index作為key還是沒問題的，順序添加刪除使用它還是可以的

13.2 列表過濾

也就是模糊搜索，先完成能過濾的功能（註意數組和字元串的方法）

image-20220502162517761

這麼做的話就會損壞原數據，我們的原數據是不能動的，因為要確保，不搜索了還能回去

定義一個新數組，讓新數組去接收搜索出來的值，同時原數組也沒有改動所以可以一直搜索，不會像原來一樣越搜數據越少的情況，同時要把遍歷的v-for修改為新數組，但是現在就有一個問題新數組為空，那我們剛開始的時候就看不到列表了

這裡有一個很重要的概念，字元串的indexOf方法對於空字元串的查找是找得到的，意思就是任何字元串.indexOf（''）都不會返回-1，都是有值的

所以只需要開啟初始化就監視一下即可，這個時候keyword為空字元串，那麼數據裡面的每條數據都有空字元串，那就會把全部數據輸出出來

image-20220502164118910

計算屬性實現

計算屬性能實現的，watch肯定能實現，watch能實現的只要不涉及到非同步任務，計算屬性一般也能實現

image-20220502164936245

就這一段代碼即可實現，為什麼直接就能渲染，以為watch預設是要先搜索再去執行handler，這裡一來就會執行，一來就是空字元串，為什麼不用自定義一個新的數組，因為計算屬性就相當於一個新的數組了

13.3 列表排序

關鍵點在於利用計算屬性裡面的任何一個依賴數據發生變動都會重新運算計算節點

image-20220502171541009

  • 數組排序參數是誰
  • 排序和過濾是密不可分的，我還需要在過濾出來的基礎上排序，不是一點排序就回到了原數據列表
  • 之所以點擊原順序可以回去，關鍵點就在於計算屬性裡面每一個依賴數據發生變動，都會重新計算重新渲染，所以一點擊原順序sortType就變動了，重新根據關鍵字去過濾數組，得出來的滿足不了排序的if就直接輸出arr了

13.4 vue監測數據改變的原理

先看到一個數據更新時的問題

image-20220502173642254

點擊後沒反應，vue管理工具也沒有數據更新

image-20220502173705825

13.4.1 vue對象監測原理

image-20220502183328244

先看一張圖，這裡有點繞，有點難以理解，我在那裡捋了四五十分鐘接近一個小時，vue的一個對象檢測原理就是，我們說過我們的data數據最終會呈現在vm實例的_data上，vue對於對象數據的檢測就是定義了一個構造函數，這個構造函數會把我們的數據的屬性名全部拿過來然後做一個遍歷，在遍歷裡面，是最重要的邏輯，用對象定義屬性的方法，**對象為this，這裡的this指的就是這個構造函數的實例，同時給他上面定義屬性，當訪問到這個構造函數實例的這個屬性的時候就把obj對應的屬性的值給到他（也就是data上面對應的值），其實這裡就是做了一個數據代理，我們讀取和寫入雖然是在這個實例上面我就說_data上面吧,插值語法之所以能夠直接寫name是因為後面又給vm做了一個數據代理，其實vue的讀寫都是基於這個_data的，讀通過_data來讀，修改雖然是修改的_data但是會把val給到data數據本身。總結就是：vue對於對象數據的監測就是通過一個構造函數，目的是加工data來給_data賦值，真正的邏輯在於裡面的defineProperty這個方法，真正的監測原理就是通過這裡面的getter和setter來讀和寫我們的data，然後再setter作進一步的邏輯，既然是setter那就是值變化了，就回去重新解析模板，diff比較虛擬DOM看哪些能復用，再把我們修改的值渲染上去 **

一句話總結：vue監測原理就靠這個setter

13.4.2 vue.set（）的使用

image-20220502205726136

這個案例首先要註意一點，在vue裡面如果值為undefined，並不會報錯，只是沒有文字顯示出來而已，這裡的age沒有賦值，所以undefined，在頁面上並不會報錯，只是一片空白沒有數據

一個需求，我如果想通過將它直接賦值讓頁面出現他的性別：

image-20220502205930276

可以看到頁面並沒有顯示，而且我們的數據也有，但是是寫死的並不是響應式的，我們之前研究過vue的監測原理靠的就是那個setter，這裡沒有給她做setter所以自然也不會映射到頁面上來

image-20220502210054209

  • Vue.set（）vue提供的的api，可以讓我們在後面添加的數據，也能夠完成響應式數據，也有屬於自己的getter和setter

    三個參數：第一個參數往哪裡添加這個屬性，第二個參數屬性名，第三個參數值

image-20220502210603960

  • 第二種寫法：vm.$set(參數跟上面一樣三個)

    image-20220502210636767

  • 局限性

    該方法不能直接給data和vm添加屬性

13.4.3 vue數組監測原理

vue裡面不能直接以數組索引去修改值

image-20220502211658540

image-20220502211803257

可以看到我們數組的值都變了，但是vue監測不到，所以頁面不會變，不能直接通過數組索引去修改值

在vue裡面數組能被監測到的只能是可以修改數組本身的七種方法

image-20220502211917770

image-20220502212112830

所以現在就可以對我們13.4那裡的案例做出回應了

image-20220502212619452

問題：為什麼vue知道我們使用了這些方法

因為vue對這些方法做出了包裝，不是Array原來的那七個方法了，實現邏輯肯定還是原來那種只是添加了一些邏輯（方法完成後會去重新解析模板，重新diff虛擬DOM）

讓數組被監測到方法二：

Vue.set這個api也可以

image-20220502213125791

13.4.4 總結vue數據監測

看下總結案例（如何實現性別在未添加之前為隱藏、修改數組裡面的對象不需要數組的方法）

  • vue會監視data中所有層次的數據

  • 對象中通過setter實現監視，且要在定義data時就傳入數據，如果是在之後添加的數據，需要Vue.set或者是vm.$set來實現監視

  • 數組中的數據通過包裹數組的七種方法實現

  • vue數組中修改元素大多數要通過七種方法或者set兩個api

    七種方法為變更方法，但是也有非變更方法如（filter、concat、slice這些會返回新數組的方法，可以讓返回的新數組替換掉舊數組，同樣可以受到監視，頁面同樣會被更改）

  • 最後註意一下set兩個api不能給vm和data跟數據對象添加屬性

  • 數據劫持：就是前面說的對象監測原理，把一個完好的data數據變成了setter的方式，我如果要修改student的值，瞬間就被setter劫持到了，去做了其他解析模板等操作，這就叫數據劫持

  • image-20220502215557912


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

-Advertisement-
Play Games
更多相關文章
  • [Linux環境編程學習筆記_1]：I/O-文件與目錄
    文件和目錄 1. 文件系統 我們可以把一個磁碟分成一個或多個分區，每個分區包含一個文件系統，這個文件系統由很多柱面組成，而柱面中有一個非常重要的概念叫做 i 節點。 i 節點包含了文件的大部分信息，如文件類型，文件訪問許可權位，文件大小和指向文件數據的指針等，大多數信息都存在st_mode成員中，有兩 ...
  • 1001-MySQL學習-第一節自習課
    MySQL學習（第一節自習課） 一. 軟體下載、安裝 下載地址：https://dev.mysql.com/downloads/installer/ 位置：mysql->installer->community1 離線安裝版本，不要選帶web路徑的是離線安裝版本。 安裝省略 進程名稱：mysqld. ...
  • 數據類產品設計和實現思路
    聲明 個人原創, 轉載需註明來源 https://www.cnblogs.com/milton/p/16216347.html 數據類產品 最近的項目需要接觸大數據處理相關的產品, 涉及了ETL, 數據挖掘和統計, 數據可視化等功能, 因此瞭解了一下這個行業的產品和工具. 最近看的產品主要是 Qua ...
  • Hadoop（四）C#操作Hbase
    Hbase Hbase是一種NoSql模式的資料庫，採用了列式存儲。而採用了列存儲天然具備以下優勢： 可只查涉及的列，且列可作為索引，相對高效 針對某一列的聚合及其方便 同一列的數據類型一致，方便壓縮 同時由於列式存儲將不同列分開存儲，也造成了讀取多列效率不高的問題 LSM Tree 說到HBase ...
  • 基於邏輯規則的圖譜推理
    導讀： 近年來，知識圖譜在眾多行業場景被大量應用，例如推薦、醫療。為了構造儘可能完備的圖譜，知識圖譜的推理工作也成為學術屆和工業界的一個重要研究課題。來自Mila人工智慧實驗室的瞿錳博士，給大家分享了他們在圖譜推理任務方向的一個研究：基於邏輯規則的圖譜推理（RNNLogic: Learning Lo ...
  • MySQL 數據備份與恢復
    數據備份 1. 備份資料庫 使用 mysqldump 命令可以將資料庫中的數據備份成一個文本文件，表的結構和數據以 SQL 的形式將存儲生成的文本文件 mysqldump -u username -p dbname>BackupName.sql 其中，dbname 代表資料庫名稱，BackupNam ...
  • Neo4j數據和Cypher查詢語法筆記
    Cypher數據結構 Cypher的數據結構: 屬性類型, 複合類型和結構類型 屬性類型 屬性類型 Integer Float String: 'Hello', "World" Boolean: true, false, TRUE, FALSE 結構類型 結構類型 node: 表示一個節點, 由 i ...
  • 大數據Hadoop之——Spark Streaming原理
    一、概述 Spark Streaming是對核心Spark API的一個擴展，它能夠實現對實時數據流的流式處理，並具有很好的可擴展性、高吞吐量和容錯性。Spark Streaming支持從多種數據源提取數據，如：Kafka、Flume、Twitter、ZeroMQ、Kinesis以及TCP套接字，並 ...
一周排行
    -Advertisement-
    Play Games
  • C#自增運算符詳解：++i與i++的區別及應用場景
    概述：在C#中，++i和i++都是自增運算符，其中++i先增加值再返回，而i++先返回值再增加。應用場景根據需求選擇，首碼適合先增後用，尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中，++i 和 i++ 都是自增運算符，但它們在操作上有細微的差異，主要體現在操作的 ...
  • Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET 版本
    上次發佈了：Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET Core 版本，今天計劃準備壓測一下 .NET 版本，來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能，以便後續持續優化改進。 為了方便對比，本文章的電腦環境和測試思路，儘量和... ...
  • 一文讀懂.NET WebAPI中FromRoute、FromQuery、FromBody的關鍵角色與用法
    .NET WebAPI作為一種構建RESTful服務的強大工具，為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時，正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性，如[FromRoute]、[FromQuery]和[FromBody]，用 ...
  • WPF/C#實現圖像濾鏡優化方案：打造炫目視覺體驗！
    原因：我之所以想做這個項目，是因為在之前查找關於C#/WPF相關資料時，我發現講解圖像濾鏡的資源非常稀缺。此外，我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時，會導致CPU的渲染負擔過重。因此，我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • Bogus 實戰：使用 Bogus 和 EFCore 生成模擬數據和種子數據【完整教程】
    引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入，上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試，今天用這個示例來演示一下如何用Bogus創建模擬數據 ，和 EFCore 的種子數據生成 Bogus 的優 ...
  • WPF隨筆收錄-實時繪製心率曲線
    一、前言 在自己的項目中，涉及到實時心率曲線的繪製，項目上的曲線繪製，一般很難找到能直接用的第三方庫，而且有些還是定製化的功能，所以還是自己繪製比較方便。很多人一聽到自己畫就害怕，感覺很難，今天就分享一個完整的實時心率數據繪製心率曲線圖的例子；之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • wpf程式修改啟動入口註意事項
    如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式，但發現 App.xaml 中定義的資源沒有被正確載入，那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣，當你創建 Ap ...
  • 記一次 .NET某爐膛鍋爐檢測系統 崩潰分析
    一：背景 1. 講故事 上個月有個朋友在微信上找到我，說他們的軟體在客戶那邊隔幾天就要崩潰一次，一直都沒有找到原因，讓我幫忙看下怎麼回事，確實工控類的軟體環境複雜難搞，朋友手上有一個崩潰的dump，剛好丟給我來分析一下。 二：WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 一個.NET內置依賴註入的小型強化版
    前言 .NET生態中有許多依賴註入容器。在大多數情況下，微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器，使用很方便。 但是筆者在使用中一直有一個頭疼的問題：服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響，但是內置容器支持註冊開放泛型服 ...
  • WPF隨筆收錄-DataGrid固定右側列
    一、前言 在項目開發過程中，DataGrid是經常使用到的一個數據展示控制項，而通常表格的最後一列是作為操作列存在，比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中，預設只支持固定左側列，這跟大家習慣性操作列放最後不符，今天就來介紹一種簡單的方式實現固定右側列。（這裡的實現方式參考的大佬 ...
所有分類