Vue计算属性与侦听器

vue

计算属性简介

什么是计算属性?

  • 通过之前章节,已经可以搭建一个简单的Vue应用,在模板里双向绑定一些数据或者表达式。
  • 但是,表达式如果过长或者逻辑更为复杂时,就会变得臃肿甚至难以阅读和维护,比如

    这里的表达式包含3个操作,并不是很清晰,所以在遇到复杂逻辑时应该使用计算属性,使用计算属性对上例进行改写。

    所有的计算属性都以 函数的形式写在vue实例内的computed选项内,最终return返回计算后的结果。

计算属性用法

  • 在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数调用等,最终返回计算后的结果。
  • 除了上例简单的用法,计算属性还可以依赖多个Vue实例的数据,只要其中任一数据变化,计算属性就会重新执行,视图也会更新。
  • 例如:下面实例展示的是在购物车内两个包裹的物品总价
  • 案例如图01:

    上图案例解析:

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

  • 计算属性包含getter和setter,上面实例都是计算属性默认用法,只是利用getter读取。此外也可以用setter函数,当手动修改计算属性的值就像修改普通数据时,便会触发setter函数,执行一些自定义操作(图02,图03)
  • 案例如图02:
  • 该案例也是计算属性的默认用法,只是利用getter读取。
  • -案例如图03:

  • getter与setter结合

计算属性用法

  • 计算属性除了上述简单的文本插值外,还常用于动态设置元素样式名称class和内联样式style,此外使用组件时,计算属性也常用来动态传递props,这些都在之后课程讲解。

计算属性技巧

  • 计算属性有两个实用的小技巧(图04)

    • ①计算属性可以依赖其他计算属性:
    • ②计算属性不仅可以依赖当前vue实例的数据,还可以依赖其他实例数据
      图04如下:

      图4案例解析:

  • 这里创建了两个实例demo1和demo2,在demo2的计算属性reverseName中,依赖的是demo1的数据name,当name变化时,实例demo2的计算属性也会变化。
  • 这样的写法在后面的组件和组件化也会用到,尤其在多人协同开发时常用,因为你写的一个组件所用数据可能需要依赖其他人的组件提供。之后会做讲解。

computed vs methods

  • 计算属性缓存VS方法
  • 除了计算属性,可以通过在表达式中调用方法来达到同样的效果:

  • 但是接下来再看个案例(Date.now() 不是响应式依赖)

    计算属性缓存VS方法

  • 使用 methods 来替代 computed,效果上两个是一样的,但是 computed

    是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。

  • 可以说使用 computed 性能会更好,但是如果不希望缓存,可以使用 methods 属性。
  • 小结:相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。
    为什么需要缓存?

  • 假设有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。
  • 然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A !如果不希望有缓存,可以用方法来替代。
    再来个案例体验下 computer 属性“依赖缓存”的概念以及与 method 的差别(图5)

    图5 案例分析:

  • num是独立于app对象的变量。在使用 reverseInfo_com这个计算属性的时候,第一次会执行代码,得到一个值,以后再使用

    reverseInfo_com这个计算属性,因为 app对象没有发生改变,于是界面渲染就直接用这个值,不再重复执行代码。

  • 而 reverseInfo_met没有这个缓存,只要用一次,函数代码就执行一次,于是每次返回值都不一样。

侦听器/属性

除了计算属性Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性/器。

  • 侦听器代码是命令式且重复的。将它与计算属性的版本进行比较

小结

  • (1)使用计算属性还是methods取决于是否需要缓存,当遍历大数组和做大量计算时,应当使用计算属性,除非你不希望得到缓存。
  • (2)因为侦听器watch相对繁琐,大多情况下推荐用计算属性computed选项处理即可。

以上是小编对计算属性与侦听器的一点见解,有问题留言小编,嘿嘿

以上是 Vue计算属性与侦听器 的全部内容, 来源链接: utcz.com/z/375704.html

回到顶部