国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

記一次思否問答的問題思考：Vue為什么不能檢測數(shù)組變動

raoyi / 975人閱讀

摘要：這里加了個(gè)簡單判斷，只看數(shù)組元素的，然后寫了一個(gè)簡單案例，主要測試使用改變數(shù)組元素能不能被監(jiān)測到，并響應(yīng)式的渲染頁面運(yùn)行頁面可以看到，運(yùn)行了次，我們數(shù)組長度為，也就是說數(shù)組被遍歷了兩遍。

問題來源：https://segmentfault.com/q/10...

問題描述：Vue檢測數(shù)據(jù)的變動是通過Object.defineProperty實(shí)現(xiàn)的，所以無法監(jiān)聽數(shù)組的添加操作是可以理解的，因?yàn)槭窃跇?gòu)造函數(shù)中就已經(jīng)為所有屬性做了這個(gè)檢測綁定操作。

但是官方的原文：由于 JavaScript 的限制， Vue 不能檢測以下變動的數(shù)組：

當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，例如： vm.items[indexOfItem] = newValue
當(dāng)你修改數(shù)組的長度時(shí)，例如： vm.items.length = newLength

這句話是什么意思？我測試了下Object.defineProperty是可以通過索引屬性來設(shè)置屬性的訪問器屬性的，那為何做不了監(jiān)聽？

有些論壇上的人說因?yàn)閿?shù)組長度是可變的，即使長度為5，但是未必有索引4，我就想問問這個(gè)答案哪里來的，修改length，新增的元素會被添加到最后，它的值為undefined，通過索引一樣可以獲取他們的值，怎么就叫做“未必有索引4”了呢？

既然知道數(shù)組的長度為何不能遍歷所有元素并通過索引這個(gè)屬性全部添加set和get不就可以同時(shí)更新視圖了嗎？

如果非要說的話，考慮到性能的問題，假設(shè)元素內(nèi)容只有4個(gè)有意義的值，但是長度確實(shí)1000，我們不可能為1000個(gè)元素做檢測操作。但是官方說的由于JS限制，我想知道這個(gè)限制是什么內(nèi)容？各位大大幫我解決下這個(gè)問題，感謝萬分

面對這個(gè)問題，我想說的是，首先，長度為1000，但只有4個(gè)元素的數(shù)組并不一定會影響性能，因?yàn)閖s中對數(shù)據(jù)的遍歷除了for循環(huán)還有forEach、map、filter、some等，除了for循環(huán)外(for,for...of)，其他的遍歷都是對鍵值的遍歷，也就是除了那四個(gè)元素外的空位并不會進(jìn)行遍歷(執(zhí)行回調(diào))，所以也就不會造成性能損耗，因?yàn)檠h(huán)體中沒有操作的話，所帶來的性能影響可以忽略不計(jì)，下面是長度為10000，但只有兩個(gè)元素的數(shù)組分別使用for及forEach遍歷的結(jié)果：

var arr = [1]; arr[10000] = 1
function a(){
    console.time()
    for(var i = 0;i{console.log(2)})
    console.timeEnd()
}
b(); //default: 0.81982421875ms
b(); //default: 0.434814453125ms

可以看到結(jié)果非常明顯,不過，如果for循環(huán)中不做操作的話兩者速度差不多

其次，我要說的是，我也不知道這個(gè)限制是什么 ???? (????) ???? ╮( ??ω?? )╭

Object.defineProperty() 方法會直接在一個(gè)對象上定義一個(gè)新屬性，或者修改一個(gè)對象的現(xiàn)有屬性， 并返回這個(gè)對象。數(shù)組的索引也是屬性，所以我們是可以監(jiān)聽到數(shù)組元素的變化的

var arr = [1,2,3,4]
arr.forEach((item,index)=>{
    Object.defineProperty(arr,index,{
        set:function(val){
            console.log("set")
            item = val
        },
        get:function(val){
            console.log("get")
            return item
        }
    })
})
arr[1]; // get  2
arr[1] = 1; // set  1

但是我們新增一個(gè)元素，就不會觸發(fā)監(jiān)聽事件，因?yàn)檫@個(gè)新屬性我們并沒有監(jiān)聽，刪除一個(gè)屬性也是。

再回到題主的問題，既然數(shù)組是可以被監(jiān)聽的，那為什么vue不能檢測vm.items[indexOfItem] = newValue導(dǎo)致的數(shù)組元素改變呢，哪怕這個(gè)下標(biāo)所對應(yīng)的元素是存在的，且被監(jiān)聽了的？

為了搞清楚這個(gè)問題，我用vue的源碼測試了下，下面是vue對數(shù)據(jù)監(jiān)測的源碼：

可以看到，當(dāng)數(shù)據(jù)是數(shù)組時(shí)，會停止對數(shù)據(jù)屬性的監(jiān)測，我們修改一下源碼:

使數(shù)據(jù)為數(shù)組時(shí)，依然監(jiān)測其屬性，然后在defineReactive函數(shù)中的get，set打印一些東西，方便我們知道調(diào)用了get以及set。這里加了個(gè)簡單判斷，只看數(shù)組元素的get，set

然后寫了一個(gè)簡單案例，主要測試使用vm.items[indexOfItem] = newValue改變數(shù)組元素能不能被監(jiān)測到，并響應(yīng)式的渲染頁面

運(yùn)行頁面

可以看到，運(yùn)行了6次get，我們數(shù)組長度為3，也就是說數(shù)組被遍歷了兩遍。兩遍不多，頁面渲染一次，可能多次觸發(fā)一個(gè)數(shù)據(jù)的監(jiān)聽事件，哪怕這個(gè)數(shù)據(jù)只用了一次，具體的需要看尤大代碼怎么寫的。就拿這個(gè)來說，當(dāng)監(jiān)聽的數(shù)據(jù)為數(shù)組時(shí)，會運(yùn)行dependArray函數(shù)(代碼在上面圖中g(shù)et的實(shí)現(xiàn)里)，這個(gè)函數(shù)里對數(shù)組進(jìn)行了遍歷取值操作，所以會多3遍get，這里主要是vue對data中arr數(shù)組的監(jiān)聽觸發(fā)了dependArray函數(shù)。

當(dāng)我們點(diǎn)擊其中一個(gè)元素的時(shí)候，比如我點(diǎn)擊的是3

可以看到會先運(yùn)行一次set，然后數(shù)據(jù)更新，重新渲染頁面，數(shù)組又是被遍歷了兩遍。

但是！！！數(shù)組確實(shí)變成響應(yīng)式的了，也就是說js語法功能并不會限制數(shù)組的監(jiān)測。

這里我們是用長度為3的數(shù)組測試的，當(dāng)我把數(shù)組長度增加到9時(shí)

可以看到，運(yùn)行了18次get，數(shù)組還是被遍歷了兩遍，點(diǎn)擊某個(gè)元素同理，渲染的時(shí)候也是被遍歷兩次。

有了上面的實(shí)驗(yàn)，我的結(jié)論是數(shù)組在vue中是可以實(shí)現(xiàn)響應(yīng)式更新的，但是不明白尤大是出于什么考慮，沒有加入這一功能，希望有知道的大佬們不吝賜教

2018-07-27補(bǔ)充

github上提問了尤大

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96307.html

相關(guān)文章

  • 【半月刊 4】前端高頻面試題及答案匯總

    摘要：引言半月刊第四期來啦，這段時(shí)間新增了道高頻面試題，今天就把最近半月匯總的面試題和部分答案發(fā)給大家，幫助大家查漏補(bǔ)缺，歡迎加群互相學(xué)習(xí)。更多更全的面試題和答案匯總在下面的項(xiàng)目中，點(diǎn)擊查看。引言 半月刊第四期來啦，這段時(shí)間 Daily-Interview-Question 新增了 14 道高頻面試題，今天就把最近半月匯總的面試題和部分答案發(fā)給大家，幫助大家查漏補(bǔ)缺，歡迎 加群 互相學(xué)習(xí)。 更多更...

    hankkin 評論0 收藏0

  • 記一次XX前端面試

    摘要：面試官說那我問你一個(gè)哲學(xué)的問題，為什么有數(shù)據(jù)結(jié)構(gòu)這種東西哇，這是啥，巴拉巴拉扯了一通，大致就是物以類聚，人以群分，先人積累下來的經(jīng)驗(yàn)，這些讓我們更方便處理數(shù)據(jù)啥的。 前因，沒有比摸魚有趣的事了 距離自己被外派(俗稱外包)出去，已經(jīng)過了快五個(gè)月，工作的話，很閑。人啊，一定保持好的習(xí)慣，懶惰是會上癮，日常摸魚，懷疑人生，我是誰，我在哪，我要干什么。 中午吃飯的時(shí)候，收到了boss直聘的一條...

    Shisui 評論0 收藏0

  • 使用Vue渲染可配置表單--記一次問卷平臺項(xiàng)目

    摘要：相當(dāng)于可以編輯問卷并提供問卷展示，數(shù)據(jù)統(tǒng)計(jì)的這么一個(gè)平臺。極大的節(jié)省了需要進(jìn)行表單樣式修改的時(shí)間，同時(shí)，讓動態(tài)渲染表單成為一件可能且容易的事情。表單動態(tài)渲染剛好在項(xiàng)目之前，有過一次動態(tài)配置表單的嘗試通過字段自動生成表單及驗(yàn)證。 近幾天來了個(gè)緊急項(xiàng)目，想要做一個(gè)內(nèi)部版本的問卷星。相當(dāng)于可以編輯問卷并提供問卷展示，數(shù)據(jù)統(tǒng)計(jì)的這么一個(gè)平臺。整個(gè)項(xiàng)目耗時(shí)不長，本著積淀和積累的原則，將過程中的...

    mcterry 評論0 收藏0

  • 記錄vue不能檢測數(shù)組和對象變動的方法。

    摘要：當(dāng)然按照官方文檔的解釋，檢測不到的主要問題是導(dǎo)致的。下列代碼，是解決數(shù)組檢測不到的問題。 測試數(shù)據(jù)： items: [ {name: 業(yè)務(wù)狀態(tài), id: taskState, data: [{name:全部, id: 0},{name:進(jìn)行中, id: 1},{name:已完成, id: 2},{name:已歸檔, id: 3},{name:已終止, id: 4}]}, ...

    Clect 評論0 收藏0

發(fā)表評論

0條評論

raoyi

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<