您现在的位置是:首页 > 正文

vue计算属性computed和侦听器watch的使用场景

2024-02-01 03:54:13阅读 2

原文链接: https://dsx2016.com/?p=679

微信公众号: 大师兄2016

特点和区别

vuecomputed选项主要用于同步对数据的处理,而watch选项主要用于事件的派发,可异步.

这两者都能达到同样的效果,但是基于它们各自的特点,使用场景会有一些区分.

computed拥有缓存属性,只有当依赖的数据发生变化时,关联的数据才会变化,适用于计算或者格式化数据的场景.

watch监听数据,有关联但是没有依赖,只要某个数据发生变化,就可以处理一些数据或者派发事件并同步/异步执行.

vue

计算属性

抽象的概念不容易理解,用多了高频的场景自然就熟悉了,计算属性表现为同步处理数据.

金融领域的分期付款,P2P年化收益,带有计算性质的,都可以优先考虑computed.

不需要关注点击事件或者其他数据,只要将计算规则写在属性里,就能实时获取对应的数据.

借款分期

电商领域的购物车统计,一个数据依赖于一个或者多个数据.

当购物车数量和产品变化时,自动计算出价格*数量的总和.

如果有优惠券或者折扣,自动减去优惠和计算折扣金额即可,同上实时计算.

只要购买数量,购买价格,优惠券,折扣券等任意一个发生变化,总价都会自动跟踪变化.

侦听器

watch侦听器能做到的计算属性computed也能做到,什么时候适合用侦听器呢?

主要适用于与事件和交互有关的场景,数据变化为条件,适用于一个数据同时触发多个事物.

如当借款额度大于可借额度时,弹出toast提示,并将当前借款额度调整到最大额度.

可以看到,数据的变化为触发弹框提示,有且仅在一定金额条件下才触发,而不是实时触发.

借款额度

 

抽象概念

弹框提示等事件交互的,适用于watch,数据计算和字符处理的适用于computed

computer

一个姓输入框,一个名输入框,实时展示全名.

<div id="name">  {{fullName}}  </div>
​
<script>
    export default {  
        name: 'test',  
        data: {  
            firstName: 'da',  
            lastName: 'shixiong',  
        },  
        computed: {  
            fullName: function () {  
                return this.firstName + ' ' + this.lastName  
            }  
        }  
    }
</script>

watch

一个金额输入框,监听金额数值大小,达到条件时给出温馨提示

<div id="Amount">  
    <input v-model="Amount" /> 
</div>
​
<script>
    export default {  
        name: 'test',  
        data: {  
            Amount: 100,  
        },  
        watch: {  
            Amount: function (newVal,oldVal) {  
                if(newVal>5000) {
                    alert("最大额度可借5000元")
                    this.Amount=5000
                }
            }  
        }  
    }
</script>

侦听器

 

网站文章

  • java程序设计任务驱动教程学习笔记二

    java程序设计任务驱动教程学习笔记二

    一、标识符与关键字

    2024-02-01 03:53:43
  • Linux命令-详解more命令

    Linux命令-详解more命令

    2020年已经过去一半,最近欠下了好几篇博客。今天开始说6月的第一个博客,很简单,说一下more的命令。今天在敲命令的时候,忽然忘记咋写了,于是复习一下。

    2024-02-01 03:53:35
  • lftp的日志记录位置

    lftp的日志记录位置

    2024-02-01 03:53:28
  • FPGA:计算滑动求和----信号检测计算信号功率

    FPGA:计算滑动求和----信号检测计算信号功率

    FPGA:计算滑动求和----信号检测计算信号功率

    2024-02-01 03:53:21
  • docker安装oracle11g史上最全步骤(带图文) 热门推荐

    docker安装oracle11g史上最全步骤(带图文) 热门推荐

    因为在Linux中安装oracle非常麻烦,相信每个人也会遇到各种坑,为了一次装好,也方便将来直接可以导出镜像在各平台移植使用,所以选择用docker安装,并做详细记录,为以后需要之时拿来再看。 1、安装docker环境。 2、开始拉取oracle镜像 docker pull registry.cn-hangzhou.aliyuncs.com/helowin/oracle_...

    2024-02-01 03:52:50
  • iOS pickerView

    1.有几组 - (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView 2.每组有几行 - (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component 3.显示内容

    2024-02-01 03:52:34
  • 数据结构【ArrayLIst】

    数据结构【ArrayLIst】

    ArrayList 方法的使用和介绍

    2024-02-01 03:52:28
  • java 反射

    java 反射

    在代码运行之前,我们不确定将来会使用哪一种数据结构,只有在程序运行时才决定使用哪一个数据类,而反射可以在程序运行过程中动态获取类信息和调用类方法。通过反射构造类实例,代码最终会演变成下面这样。

    2024-02-01 03:52:02
  • QT POST/GET 发送/获取网页数据 热门推荐

    #include #include QNetworkAccessManager *m_accessManager;Widget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget) { ui-&gt;setupUi(this); m_acc

    2024-02-01 03:51:53
  • 火爆全网,接口测试总结汇总,全知识点扫描卷起来...

    火爆全网,接口测试总结汇总,全知识点扫描卷起来...

    第一部分:主要从问题出发,引入接口测试的相关内容并与前端测试进行简单对比,总结两者之前的区别与联系。但该部分只交代了怎么做和如何做?并没有解释为什么要做?第二部分:主要介绍为什么要做接口测试,并简单总...

    2024-02-01 03:51:45