vue中forceupdate的使用

vue中$forceUpdate的使用

登錄 2019-03-28 簡單總瀏覽：46今日瀏覽：4

vue中的$forceUpdate是強制更新的意思，之前沒太怎么用過，最近看了下，覺得還挺有意思的，一起來看看是咋用的。

深結構數據

首先我們知道在vue中，數據的綁定都不用我們操心，例如在data中有一個msg的變量，你修改它，那么在頁面上，msg的內容就會自動發生變化。但是如果對於一個復雜的對象，例如一個對象數組，你直接去給數組上某一個元素增加屬性，或者直接把數組的length變成0，vue就無法知道發生了改變。

=>  vue無法感知的數據變動 (二維碼)

上面的demo就是一個對象數組，我們嘗試直接給某個item增加一個屬性，發現頁面上沒有效果；直接將length變成0來清空數組，也沒有效果，關鍵代碼如下：

1. change: function(index) {//增加性別屬性
2.     this.list[index].sex = '男';
3. },
4. clear: function() {//清空數組
5.     this.list.length = 0;
6. }

隱藏代碼

其實呢，上面的寫法沒有效果，是因為沒有按照vue的規范去寫，因為vue文檔里面寫了，對於深層的，最好用$set方法，這樣vue就可以知道發生了變化，同時vue也不建議直接修改length，可以給一個空數組來置空。

=>  深層用$set去設置 (二維碼)

上面是我們按照vue的規范去寫的，是可以實現變化的，關鍵代碼如下：

1. change: function(index) {//增加性別屬性
2.     this.$set(this.list[index],'sex','男')
3. },
4. clear: function() {//清空數組
5.     this.list=[];
6. }

可是如果我們不想利用$set去設置，非要按照我們第一種方式去寫，可以實現么？答案是可以的，就是利用$forceUpdate了，因為你修改了數據，但是頁面層沒有變動，說明數據本身是被修改了，但是vue沒有監聽到而已，用$forceUpdate就相當於按照最新數據給渲染一下。

=>  利用$forceUpdate更新 (二維碼)

關鍵代碼如下：

1. change: function(index) {
2.     this.list[index].sex = '男';
3.     this.$forceUpdate();
4. },
5. clear: function() {
6.     this.list.length = 0;
7.     this.$forceUpdate();
8. }

$children

$children表示當前頁面的組件個數，但是如果直接在頁面上引用{{$children}}，往往得不到正確的結果：

=>  如何顯示$children個數 (二維碼)

這個和vue內部的實現機制有關，（vue不同版本可能不一定有此問題），可以看到，當我們用$forceUpdate之后，就會得到正確的結果。當然，一般我們也不會這么去使用，我們可以在data里面定義一個變量，在mounted之后給變量賦值this.$children.length；或者直接在mounted之后使用$forceUpdate強制刷新。