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>