首页 > 其他 > 详细

vue-async-computed(异步计算属性使用)

时间:2020-12-05 11:19:12      阅读:403      评论:0      收藏:0      [点我收藏+]

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>

 

vue-async-computed(异步计算属性使用)

原文:https://www.cnblogs.com/zxuedong/p/14088546.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!