如何操作Vue使數組變異
這次帶給大家如何操作Vue使陣列變異,操作Vue使陣列變異的注意事項有哪些,下面就是實戰案例,一起來看一下。
前言
很多初使用Vue的同學會發現,在改變數組的值的時候,值確實是改變了,但是視圖卻無動於衷,果然是因為陣列太高冷了嗎?
查看官方文件才發現,不是女神太高冷,而是你沒用對方法。
看來想讓女神自己動,關鍵得用對方法。雖然在官方文件中已經給出了方法,但是在下實在好奇的緊,想要解鎖更多姿勢的話,那就必須先要深入女神的心,於是乎才有了去探索Vue響應式原理的想法。 (如果你願意一層一層地剝開我的心。你會發現,你會買異… 沉迷於鬼哭狼嚎 無法自拔QAQ)。
前排提示,Vue的響應式原則主要是使用了ES5的Object.defineProperty,毫不知情的同學可以查看相關資料。
為啥數組不回應?
仔細一想,Vue的回應是基於Object.definePropery的,這個方法主要是對物件屬性的描述進行修改。數組其實也是對象,定義數組的屬性應該也能產生響應的效果呀。先驗證一下自己的想法,擼起袖子就開乾。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
接著在控制台中分別輸入arr、arr[0] = 2、arr,可以看到如下圖的結果。
咦,一切居然都如預想猜想的一樣。
接下來,看到這段程式碼,有的同學可能會有所疑問,為啥在get()方法裡不直接返回this[0]呢?而是要藉助val來回傳值呢?仔細一想,臥槽! ! !差點特麼的死循環了,你想呀,get()本身就是取得目前屬性的值,在get()裡呼叫this[0]不是等同於再次呼叫了get()方法嗎?好可怕好可怕,簡直嚇死勞資了。
雖然你想像中的女神可能會這種姿勢,但是你眼前的這個女神確實不是這種姿勢的,像我這種屌絲屬性暴露無疑的人怎麼可能猜透女神的心思?為什麼不這樣響應數據呢?或許是因為數組和物件還是有所差別,定義數組的屬性可能會產生一些麻煩與Bug。又或許是因為在互動的過程中可能會產生大量的數據,導致整體的表現下降。也有可能是作者權衡利弊之後用其他方法也可以達到數據回應的效果。反正我是猜不透啦。
為啥呼叫陣列原生方法就可以回應了?
為什麼使用了這些陣列的方法就就能讓資料回應了呢?先看看數組部分的源碼吧。
簡單的來講,def的作用就是重新定義物件屬性的value值。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
|
貼出def部分的程式碼
1 2 3 4 5 6 7 8 9 10 11 |
|
array.js是對陣列的一些方法進行變異,我們以push方法來舉例說明。首先 就是要用original = arrayProto['push']來保存原生的push方法。
然後就是要定義變異的方法了,對於def函數,如果不深究的話,def(arrayMethods,method,function(){}),這個函數可以粗略的表示為arrayMethods[method] = function mutator(){};
假設在之後呼叫push方法,實際上呼叫的是mutator方法,在mutator方法中,第一件事就是呼叫保存了原生push方法的original,先求出實際的值。一堆文字看起來實在很抽象,那麼寫一段低配版的程式碼來表達原始碼的意思。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
在控制台中查看結果為:。
那麼原始碼中的
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
这段代码就是对应的doSomething()了
在该代码中,清清楚楚的写了2个单词的注释notify change,不认识这2个单词的同学就百度一下嘛,这里就由我代劳了,这俩单词的意思是发布改变!每次调用了该方法,都会求出值,然后做一些其他的事情,比如发布改变与观察新增的元素,响应的其他过程在本篇就不讨论了。
1 2 3 4 5 6 7 8 9 |
|
目前一共有这么些方法,只要用对方法就能改变女神的姿势哟!
小结
对于标题,我一改再改,一开始叫浅析Vue响应原理,但是后来一看 这个标题实在太大,那就从最简单的入手吧,先从数组入手,而且本篇也不会花费太多时间去阅读。如果本篇有什么地方写得有误,误导了他人,请一定指出,万分感激。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是如何操作Vue使數組變異的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

使用foreach循環移除PHP數組中重複元素的方法如下:遍歷數組,若元素已存在且當前位置不是第一個出現的位置,則刪除它。舉例而言,若資料庫查詢結果有重複記錄,可使用此方法移除,得到不含重複記錄的結果。

PHP中深度複製數組的方法包括:使用json_decode和json_encode進行JSON編碼和解碼。使用array_map和clone進行深度複製鍵和值的副本。使用serialize和unserialize進行序列化和反序列化。

PHP數組鍵值翻轉方法效能比較顯示:array_flip()函數在大型數組(超過100萬個元素)下比for迴圈效能更優,耗時更短。手動翻轉鍵值的for迴圈方法耗時相對較長。

多維數組排序可分為單列排序和嵌套排序。單列排序可使用array_multisort()函數依列排序;巢狀排序需要遞歸函數遍歷陣列並排序。實戰案例包括按產品名稱排序和按銷售量和價格複合排序。

PHP的array_group_by函數可依鍵或閉包函數將陣列中的元素分組,傳回關聯數組,其中鍵為組名,值是屬於該組的元素數組。

在PHP中執行陣列深度複製的最佳實踐是:使用json_decode(json_encode($arr))將陣列轉換為JSON字串,然後再轉換回陣列。使用unserialize(serialize($arr))將陣列序列化為字串,然後將其反序列化為新陣列。使用RecursiveIteratorIterator迭代器對多維數組進行遞歸遍歷。

目錄Astar Dapp 質押原理質押收益 拆解潛在空投項目:AlgemNeurolancheHealthreeAstar Degens DAOVeryLongSwap 質押策略 & 操作“AstarDapp質押”今年初已升級至V3版本,對質押收益規則做了不少調整。目前首個質押週期已結束,第二質押週期的「投票」子週期剛開始。若要獲得「額外獎勵」收益,需掌握此關鍵階段(預計持續至6月26日,現餘不到5天)。我將細緻拆解Astar質押收益,

PHP陣列去重演算法的複雜度:array_unique():O(n)array_flip()+array_keys():O(n)foreach迴圈:O(n^2)
