vue-async-computed（異步計算屬性使用）

vue-async-computed

 

 

1.介紹：vue里普通的計算屬性computed只能計算一些同步的值，但是如果碰到需要在計算屬性中發送一些異步的網絡請求，需要用到vue-async-computed異步計算屬性的插件

// 安裝插件

npm install vue-async-computed --save

// 引入注冊使用

import AsyncComputed from 'vue-async-computed'

Vue.use(AsyncComputed)


// 在組件中使用


// home.vue


<template>

<div>
    
    <van-button @click="count = count + 1">count</van-button>
    
    <van-button @click="title = '拉拉'">哈啊</van-button>

    <van-button @click="emit">手動觸發</van-button>

</div>

</template>


<script>
export default {

data() {
    return {
      title: "首頁",
      count: 0,
    };
},

// 異步計算屬性
asyncComputed:{

    comFn: {

        // 有get和set方法

        get () {
            
            return this.title
        },

        // 監視其他數據變化也更新vue數據

        watch: ["count"],

        // 根據判斷條件渲染

       shouldUpdate() {

         return this.count !== 3;
       },

        // 如果為lazy為true的話表示在vue DOM掛載完成調用，為false為實列創建完成調用

      lazy: true,
    }
},

methods: {

    emit() {

      // 手動更新

      this.$asyncComputed.comFn.update();

    },
}

}
</<script>