Vue computed 和 watch

468122151 发布于2019-08-26 12:00 / 3059人阅读

摘要：监听属性变化，一般是用于跟数据无关的业务逻辑操作。计算属性，适用于属性发生变化后，需要计算得到新的数据。

computed 计算属性：通过属性计算得来的属性

    计算属性,是在相关联的属性发生变化才计算，计算过一次，如果相关属性没有变化，下一次就不需要计算了，直接去缓存的值

  a:
  b:
 
 总和：{{sum()}}
 总和：{{count}}
 平均值：{{avg}}

 单价：{{price}}
 数量：
 总价：{{sum}}
 运费：{{free}}
 应付：{{pay}}

    data: {
            a: "",
            b:"",
            c:"",
            price: 28.8,
            count: "",
            free: 10
    },
    computed: {
        count(){
            console.log("计算属性触发了");
                return this.a+this.b;
        },
        avg(){
            return this.count/2;
        },
       sum(){
            return this.price * this.count;
        },
      pay(){
        if(this.count>0){
            if(this.sum>=299){
                return this.sum;
        }else{
            return this.sum + this.free;
        }
          }else{
                return 0;
        }
        }
     }

watch
属性变化，就会触发监听的函数。
监听属性变化，一般是用于跟数据无关的业务逻辑操作。
计算属性，适用于属性发生变化后，需要计算得到新的数据。

     
            a: 

            b: 

            总和：{{count}}
            
            



            
            name: 

            age:

watch 也可以在methods里面进行监听配置


            a: 

            b: 

            总和：{{count}}
            
            



            
            name: 

            age:

GPU云服务器云服务器 webrtc和vue computed computer COMPUTE

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107996.html

Vue的computed和watch的细节全面分析

摘要：定义是一个计算属性类似于过滤器对绑定到的数据进行处理用法不可在里面定义如果定义会报如下图片的错误因为对应的作为计算属性定义并返回对应的结果给这个变量变量不可被重复定义和赋值和用法回调函数当需要读取当前属性值是执行，根据相关数据计算并返回当前 1.computed 1.1 定义是一个计算属性,类似于过滤器,对绑定到view的数据进行处理 1.2 get用法 data: { ...

lastSeries 2019-08-01 18:25 评论0 收藏0
Vue的computed和watch的细节全面分析

摘要：定义是一个计算属性类似于过滤器对绑定到的数据进行处理用法不可在里面定义如果定义会报如下图片的错误因为对应的作为计算属性定义并返回对应的结果给这个变量变量不可被重复定义和赋值和用法回调函数当需要读取当前属性值是执行，根据相关数据计算并返回当前 1.computed 1.1 定义是一个计算属性,类似于过滤器,对绑定到view的数据进行处理 1.2 get用法 data: { ...

CoderDock 2019-08-22 13:58 评论0 收藏0
浅谈Vue中计算属性computed的实现原理

摘要：虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。当某个属性发生变化，触发拦截函数，然后调用自身消息订阅器的方法，遍历当前中保存着所有订阅者的数组，并逐个调用的方法，完成响应更新。虽然目前的技术栈已由Vue转到了React，但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的，Vue文档清晰规范，api设计简洁高效，对前端开发人员友好，上手快，甚至个人认为在很多...

laznrbfe 2019-08-23 11:56 评论0 收藏0
做面试的不倒翁：浅谈 Vue 中 computed 实现原理

摘要：当某个属性发生变化，触发拦截函数，然后调用自身消息订阅器的方法，遍历当前中保存着所有订阅者的数组，并逐个调用的方法，完成响应更新。编者按：我们会不时邀请工程师谈谈有意思的技术细节，希望知其所以然能让大家在面试有更出色表现。也给面试官提供更多思路。 showImg(https://segmentfault.com/img/bVbgYyU?w=1200&h=600); 虽然目前的技术...

Anonymous1 2019-08-23 11:57 评论0 收藏0
针对vue wtach一次详细的剖析

摘要：提问深度与非深度的区别对象与数组与的区别的一个特点是，最初绑定的时候是不会执行的，要等到改变时才执行监听计算。为一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象适用场景一个数据影响多个数据。提问 1.深度watch与非深度watch的区别；2.watch对象与数组；3.watch与computed的区别； immediate FullNa...

crossoverJie 2019-08-23 18:05 评论0 收藏0
vue源码-对于「计算属性」的理解

摘要：源码对于计算属性的理解这是我最近学习源码的一个个人总结和理解，所以可能并不适合每一位读者本文的整体脉络如下，首先尽可能去掉细节，对计算属性源码的大致实现有一个了解，然后举一例子，分别谈谈计算属性依赖收集和派发更新的流程。 vue源码-对于「计算属性」的理解这是我最近学习vue源码的一个个人总结和理解，所以可能并不适合每一位读者本文的整体脉络如下，首先尽可能去掉细节，对计算属性源码的...

xiaochao 2019-08-23 13:10 评论0 收藏0