让每一名学员高薪就业
返回列表 发新帖

Vue计算属性用法

[复制链接]

55

主题

89

帖子

1241

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1241

版主

发表于 2018-3-8 10:39:44  | 显示全部楼层 | 阅读模式
本帖最后由 萤火虫 于 2018-3-8 10:39 编辑

  在vue的计算属性里面可以完成各种复杂的逻辑,运算、函数调用等等这些都可以完成,只需要计算好了,最终返回一个结果就好了,同时,计算属性可以依赖多个vue实例的数据,只有任何一个数据发生变化,计算属性就会重新执行,视图也会更新。下面这个例子,展现了购物车内两个包裹物品的总价格:

1.png

2.png

  当package1 package2中的商品有任何的变化,比如购买的数量变化,或者增加删除商品的时候,计算属性prices就会自动更新,视图中的总价也会自动变化。

  每一个计算属性都包含有一个gettersetter,我们上面的是使用计算属性的默认用法,知识用了getter来读取,在你需要的时候,也可以提供一个setter函数,当手动修改属性的值,就像修改一个普通数据那样是,就会触发setter函数,去执行一些自己定义的操作,例如下面的例子

3.png


  当执行app.fullName = ‘John Doe’时, setter就会被调用,数据fullNamelastName都会相对更新,视图也会更新。

  绝大多数情况下,我们只会用默认的getter方法来读取一个属性,在业务逻辑中,很少用到setter,所以在声明一个计算属性时,可以直接使用默认的写法,不必将gettersetter都声明。

  计算属性除了上述简单的文本插值意外,还经常用于动态的设置元素的样式名称class和内联样式,style,在使用组件时,计算属性也经常用来动态的传递props

  计算属性还有两个很实用的小技巧:第一个是计算属性可以依赖其他的计算属性,第二个是,计算属性不仅可以依赖当前vue实例的数据,还可以依赖其他实例的数据,如下:

4.png


  这里创建了两个vue实例,app1app2,在app2 的计算属性reverserText中,依赖的是app1的数据text,所以当text变化时,实例app2的计算属性也会变化,这种用法在多人协作开发的时候就可以用到,当你写的组件所用到的数据需要依赖他人的组件时,就需要使用这种方式。

  当然,很多人也知道,我们调用methods里面的方法的时候,也可以取到和计算属性同样的作用,而且methods里面的方法还可以接收参数,使用起来更灵活,既然使用methods就可以实现,为什么还需要计算属性呢?原因就是计算属性基于它的依赖缓存的。一个计算属性,只有所依赖的数据发生变化时,它才会重新取值,所以text只要变,计算属性就不会更新,但是methods则不同,只要重新渲染,就会被调用,里面定义的函数也会执行。

  使用计算属性还是methods取决于你是否需要缓存,当遍历数组和做大量计算是,就需要用到计算属性。

  以上,就是vue里面计算属性的全部用法。

本文为源码时代H5前端老师原创,转载请标明出处(www.itsource.cn


回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

推荐阅读

最新活动

联系我们

Java培训  |   PHP培训  |   UI培训  |   H5培训  |   Python培训  |   大数据培训  |   如何报名  |   视频下载
快速回复 返回顶部 返回列表