vue2 X基礎知識七之 nextTick

2021-08-20 06:54:45 字數 666 閱讀 7661

獲取div內容

//選擇元素

data: ,

//通過事件觸發

methods:

}});

上面**執行後,會丟擲乙個錯誤: cannot read property 'innerhtml' of null;這裡涉及到乙個重要的概念: 非同步更新佇列。

vue在觀察到資料變化時並不是直接更新dom,而是開啟乙個佇列,並緩衝在同一事件迴圈中發生的所有資料改變。在緩衝時會去除重複資料,從而避免不必要的計算和dom操作。然後,在下乙個事件迴圈tick中,vue重新整理佇列並執行實際工作。

事實上,在執行this.showdiv = true;時,div仍然還是沒有被建立出來,直到下乙個vue事件迴圈時,才開始建立。$nexttick就是用來知道什麼時候dom更新完成的,所以上面的示例**需要修改為:

獲取div內容

//選擇元素

data: ,

//通過事件觸發

methods: );}}

});

理論上,我們應該不用主動去操作dom,因為vue的核心思想就是資料驅動dom,但在很多業務裡,我們避免不了會使用一些第三方庫,比如swiper等,這些機遇原生js的庫都有建立和更新及銷毀的完整宣告週期,與vue配合使用時,就要利用好$nexttick。

本文摘抄自書籍《vue.js實戰》

vue2 X基礎知識六之slot內容分發

當需要讓元件組合使用,混合父元件的內容與子元件的模板時,就會用到slot,這個過程叫做內容分發。1 slot內容分發 在子元件內使用特殊的元素就可以為這個子元件開啟乙個slot 插槽 在父元件模板裡,插入在子元件標籤內的所有內容將替代子元件的標籤及它的內容。例如 更多分發的內容 沒有name屬性的s...

vue2 x知識總結

data data data data 逆轉訊息 data methods data 現在我們為每個 todo item 提供 todo 物件 todo 物件是變數,即其內容可以是動態的。我們也需要為每個元件提供乙個 key 稍後再 作詳細解釋。vue.component todo item dat...

Vue2 x之迴圈模板指令

v for指令用於遍歷陣列,物件很方便。在兩者遍歷時,我們都使用了 key指令,這是在標識區別每一項,避免vue渲染錯誤。但在實際使用中遇到情況更多是需要多元素配合的。假如我們想連續使用多個li標籤和hr標籤,可採用以下語法 v for標籤繫結的元素中的內容會被遍歷多次 但是這樣使用會多出乙個冗餘標...