文档章节

九、Vue中的computed属性

o
 osc_8db3mwb5
发布于 07/01 11:17
字数 2287
阅读 33
收藏 0

精选30+云产品,助力企业轻松上云!>>>

 

看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲聊起来,对computed这个属性才有了一个稍微比较清晰的认识,下面的文章有一部分是转自: https://www.w3cplus.com/vue/vue-computed-intro.html © w3cplus.com,

感觉这篇文章上面的例子通俗易懂,所以此处借用了。

自己的理解:

  • computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理;
  • computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化,举例:购物车里面的商品列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择

与watch之间的区别:

  刚开始总是傻傻分不清到底在什么时候使用watch,什么时候使用computed。这里大致说一下自己的理解:

  • watch主要用于监控vue实例的变化,它监控的变量当然必须在data里面声明才可以,它可以监控一个变量,也可以是一个对象,但是我们不能类似这样监控,比如:
watch:{
goodsList.price(newVal,oldVal){
    //监控商品列表中是商品价格
}
}

这样会报错。只能监控整个对象或单个变量,如下所示:

 data(){
        return {
          example0:"",
          example1:"",
          example2:{
             inner0:1,          
                           innner1:2          
                     }
      }
    },
watch:{
 example0(newVal,oldVal){//监控单个变量
           ……
   },
example2(newVal,oldVal){//监控对象 …… },
}
  • watch一般用于监控路由、input输入框的值特殊处理等等,它比较适合的场景是一个数据影响多个数据

这里是我2020年6月30日补充上去的,看到评论里说还有一种方法可以监听对象,迫不及待试了一下,真的可以,所以更新下文章:

 

 监听appversionName用下面的方式,将对象和属性用引号的方式‘对象名.属性名’(newVal,oldVal){}

1   watch: {
2     "dialogForm.appversionName"(newVal, oldVal) {
3       console.log("新值:"+newVal,"旧值:"+ oldVal);
4     }
5   },

监听情况如下:

 

 


 

以下内容是摘自https://www.w3cplus.com/vue/vue-computed-intro.html © w3cplus.com:

计算属性可用于快速计算视图(View)中显示的属性。这些计算将被缓存,并且只在需要时更新。

在Vue中有多种方法为视图设置值:

  • 使用指令直接将数据值绑定到视图
  • 使用简单的表达式对内容进行简单的转换
  • 使用过滤器对内容进行简单的转换

除此之外,我们还可以使用计算属性根据数据模型中的值或一组值来计算显示值。

计算属性

计算属性允许我们对指定的视图,复杂的值计算。这些值将绑定到依赖项值,只在需要时更新。

例如,我们可以在数据模型中有一个results数组:

假设我们想要查看所有主题的总数。我们不能使用filtersexpressions来完成这个任务。

  • filters:用于简单的数据格式,在应用程序的多个位置都需要它
  • expressions:不允许使用流操作或其他复杂的逻辑。他们应该保持简单

这个时候,计算属性就可以派上用场。我们可以向模型中添加一个计算值,如下:

效果如下:

计算属性 vs 方法

我们可以使用Vue中的method计算出学科的总分,最终得到的总数结果是相同的。

在上例的基础上,我们把computed区块中的totalMarks函数整体移到methods中。同时在模板中将{{ totalMarks }} 替换成{{ totalMarks() }}。 你最终看到的结果是一样的,如下所示:

虽然这两种方式输出的结果是相同的,但是性能将遭受毁灭性的打击。使用这种方法totalMarks()方法在每次页面渲染时都被执行一次(例如,使用每一个change)。

如果我们有一个计算属性,那么Vue会记住计算的属性所依赖的值(在我们这个示例中,那就是results)。通过这样做,Vue只有在依赖变化时才可以计算值。否则,将返回以前缓存的值。这也意味着只要results还没有发生改变,多次访问totalMark计算属性会立即返回之前的计算结果,而不必再次执行函数。

上面两个示例也说明,在Vue中计算属性是基于它们的依赖进行缓存的,而方法是不会基于它们的依赖进行缓存的。从而使用计算属性要比方法性能更好。

这也同样意味着下面的计算属性将不再更新,因为Date.now()不是响应式依赖:

相比之下,每当触发重新渲染时,方法的调用方式将总是再次执行函数。因此,函数必须是一个纯函数。它不能有副作用。输出只能依赖于传递给函数的值。

那么我们为什么需要缓存?假设我们有一个性能开销比较大的的计算属性A,它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 Agetter!如果你不希望有缓存,请用方法来替代。

计算属性的setter

计算属性默认只有getter,不过在需要时你也可以提供一个setter

效果如下:

你在输入框中输入一个fullName,然后点击set按钮,可以看到对应的效果。你现在再运行app.fullName="Airen liao"时,计算属性的setter会被调用,app.firstNameapp.lastName也相应地会被更新。如下图所示:

观察者:

虽然计算属性在大多数情况下更合适,但有时候也需要一个自定义的watcher。这是为什么Vue通过watch选项提供一个更通用的方法,来响应数据的变化。当你想要在数据变化响应时,执行异步操作或开销较大的操作,这是很有用的。

Vue确实提供了一种更通用的方式来观察和响应Vue实例上的数据变动:watch属性。当你有一些数据需要随着其它数据变动而变动时,你很容易滥用watch。然而,通常更好的想法是使用计算属性而不是命令式的watch回调。比如下面的示例:

上面代码是命令式的和重复的。将它与计算属性的版本进行比较:

 

 

假设我们想要查看所有主题的总数。我们不能使用 filtersexpressions来完成这个任务著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/vue/vue-computed-intro.html © w3cplus.com

除此之外,我们还可以使用计算属性根据数据模型中的值或一组值来计算显示值。著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/vue/vue-computed-intro.html © w3cplus.com

在Vue中有多种方法为视图设置值:

  • 使用指令直接将数据值绑定到视图
  • 使用简单的表达式对内容进行简单的转换
  • 使用过滤器对内容进行简单的转换

除此之外,我们还可以使用计算属性根据数据模型中的值或一组值来计算显示值。

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/vue/vue-computed-intro.html © w3cplus.com

计算属性可用于快速计算视图( View)中显示的属性。这些计算将被缓存,并且只在需要时更新。著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/vue/vue-computed-intro.html © w3cplus.com

计算属性可用于快速计算视图( View)中显示的属性。这些计算将被缓存,并且只在需要时更新。著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/vue/vue-computed-intro.html © w3cplus.com

计算属性可用于快速计算视图( View)中显示的属性。这些计算将被缓存,并且只在需要时更新。著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/vue/vue-computed-intro.html © w3cplus.com

o
粉丝 0
博文 58
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
九、Vue中的computed属性

看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲聊起来,对computed这个属性才有了一个稍微比较清晰的认识,下面的文章有一部分是转自: https://...

gunelark
2018/03/02
0
0
九、Vue中的computed属性

看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲聊起来,对computed这个属性才有了一个稍微比较清晰的认识,下面的文章有一部分是转自: https://...

osc_mhxmyy0u
2018/03/02
5
0
legend2---开发日志9(vue常见无法自动更新改变的原因是什么)

legend2---开发日志9(vue常见无法自动更新改变的原因是什么) 一、总结 一句话总结:没找到变量,比如在computed属性中vue的变量没加this 没找到变量 1、函数中var bottomexpbarvm = new Vu...

osc_thcjzdd1
2019/04/18
5
0
Vuejs中关于computed、methods、watch的区别。

Vue.js在模板表达式中限制了,绑定表达式最多只能有一条表达式,但某些数据需要一条以上的表达式运算实现,此时就可以将此数据放在计算属性(computed)当中。 Vuejs中关于computed、methods...

lslaiwy
2018/08/24
138
0
Vue中的computed属性

看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲聊起来,对computed这个属性才有了一个稍微比较清晰的认识,下面的文章有一部分是转自: https://...

bluefrankey
2018/08/16
88
0

没有更多内容

加载失败,请刷新页面

加载更多

测试工程师需要了解的shell变量知识

顾老师安全测试新课,报名地址: http://www.hbz100.com/pc/course/courseInfo.do?courseId=182320200226121405459。疫情期间,您在注意身体安全的同时,关注身体安全了吗?500元工作几天的薪...

啄木鸟顾老师
04/15
13
0
前端面试开源项目清单(github仓库,个人网站都有)

 复习前端面试的知识,是为了巩固前端的基础知识,最重要的还是平时的积累! ” 开源项目 https://github.com/InterviewMap/CS-Interview-Knowledge-Map 建立最好的面试地图。目前的内容包...

Fe-frank
05/11
12
0
【Flutter 专题】33 自定义 View 之 Canvas (一)

和尚最近在学习自定义 View,刚了解了一下 Paint 画笔的神奇之处,现在学习一下 Canvas 画布的神秘之处。Flutter 提供了众多的绘制方法,和尚接触不深,尽量都尝试一下。 Canvas 画布 drawCo...

阿策
2019/02/26
5
0
程序员,有需求做需求,有bug改bug,有什么好生气的呢?

对哦,我有什么好生气的呢! 本文分享自微信公众号 - WriteSimpleDemo(this_is_a_wechat)。 如有侵权,请联系 support@oschina.cn 删除。 本文参与“OSC源创计划”,欢迎正在阅读的你也加入...

PedroQin
2019/10/25
8
0
[从0到1搭建ABP微服务] - 搭建授权服务

一、简介 授权中心是微服务架构中最为核心重要的环节,不仅为web、app等客户端提供身份授权服务,还对其他微服务提供身份认证服务。ABP微服务架构中使用identityServer4框架进行身份管理,并...

osc_g91p39eg
15分钟前
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部