Vue的狀態控制與延時刷新

DevTTL 發布于2019-08-20 10:21 / 2205人閱讀

摘要：當我們理解數據驅動時，我們很容易想到將需要刷新的狀態也設置成為某個數據，在需要刷新的地方這個數據，當刷新狀態發生變動的時候，生效并執行刷新的方法，這就實現了延時刷新。現在我們用來實現一個狀態驅動的延時刷新。

在實際項目中，我們經常會遇到這種狀況，某些數據我們希望等到需要的時候再去獲取，或者某些數據我們需要刷新，但是不必立刻刷新，而是延時到展示的時候再去刷新。
在DOM操作的年代，想要實現這樣的功能可能會稍微麻煩一些，然而當我們使用數據驅動的mv*框架的時候，這個想要實現這個需求就容易了許多。
當我們理解數據驅動時，我們很容易想到將需要刷新的狀態也設置成為某個數據，在需要刷新的地方watch這個數據，當刷新狀態發生變動的時候，watch生效并執行刷新的方法，這就實現了延時刷新。而且我們不再需要關注延時的過程，只需要更改刷新狀態就可以了。
現在我們用Vue來實現一個狀態驅動的延時刷新。
首先我們利用vue的混合來實現一個統一的刷新接口，你可以把混合理解成一種特殊的繼承來使用。

//刷新mixin
var refreshMixin = {
    props: ["refresh"],
    watch: {
        //狀態監視
        "refresh": function (val) {
            //console.log(val)
            //刷新列表
            val && this.refreshData()
        },
    },
    created: function () {
        this.refresh && this.refreshData()
    },
}

在這個refreshMixin中，當組件創建或者refresh狀態發生變更時，判斷狀態是否是true，如果是true，則調用組件的refreshData方法。
我們在組件當中混合這個refreshMixin，并且實現refreshData方法，就可以實現狀態驅動刷新。

注意，refresh狀態使用雙向綁定，并且在調用refreshData方法時立刻將refresh狀態置為false，以便下次調用。

下面給予一個簡單的demo
https://jsfiddle.net/damaida/...

在實際項目中，組件可以被延時到某個事件被觸發時再實例化，或者列表詳情數據被展示時被調用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80103.html

vue.js起步式（二）

摘要：當需要和第三方的動畫庫，比如配合時會非常有用顯式聲明過渡類型新增需要給過渡元素添加事件偵聽器來偵聽過渡何時結束。在下例中我們使用注冊一個自定義的過渡元素已被插入在動畫結束后調用與相同然后用特性中漸近過渡與一起用時可以創建漸近過渡。 8.方法與事件處理器方法處理器可以用 v-on 指令監聽 DOM 事件： Greet 我們綁定了一個單擊事件處理器到一個方法 greet。下面在...

BearyChat 2019-08-20 10:29 評論0 收藏0
Vue中對iframe實現keep alive（無刷新）

摘要：前言最近一個需求，需要在項目中加入含有的頁面，同時在路由切換的過程中，要求的內容不會被刷新。的原理要實現對保持頁的狀態。實現的思路既然保持頁里的狀態很難實現，在這個時候我想到了一個別的方法。前言最近一個需求，需要在Vue項目中加入含有iframe的頁面，同時在路由切換的過程中，要求iframe的內容不會被刷新。一開始使用了Vue自帶的keep- alive發現沒有用，于是自己研究了...

heartFollower 2019-08-02 15:38 評論0 收藏0
Vue中對iframe實現keep alive（無刷新）

摘要：前言最近一個需求，需要在項目中加入含有的頁面，同時在路由切換的過程中，要求的內容不會被刷新。的原理要實現對保持頁的狀態。實現的思路既然保持頁里的狀態很難實現，在這個時候我想到了一個別的方法。前言最近一個需求，需要在Vue項目中加入含有iframe的頁面，同時在路由切換的過程中，要求iframe的內容不會被刷新。一開始使用了Vue自帶的keep- alive發現沒有用，于是自己研究了...

k00baa 2019-08-26 10:21 評論0 收藏0