Vue 计算属性(computed)和侦听器(watch)

本文章首更于掘金账号,主要是为了方便自己以后复习和回忆,有错误或不合理之处还请大家指正。

计算属性:computed

作用

  • 减少模板中的计算逻辑
  • 进行数据缓存
  • 依赖固定的数据类型

使用

  • 在computed属性对象中定义计算属性的方法
  • 在页面中使用{{方法名}}来显示计算的结果
  • 通过getter/setter实现对属性数据的显示和监视

注意点

  • 计算属性是基于它们的依赖进行缓存的,只有相关的依赖发生改变时才会重新求值。只要相关的依赖未改变,只会返回之前的结果,不会执行函数。
  • computed依赖监控自己定义的变量,computed不能计算已经在data里面定义过的值,该变量在computed里面定义,然后可以在页面上进行数据绑定
  • computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化

实例




                    
                    

你可能感兴趣的:(Vue 计算属性(computed)和侦听器(watch))