Vue预习课04：计算属性和侦听器.pdf

计算属性和侦听器

计算属性是有缓存性的,当在计算属性中使用到的data中定义的数据发生变化的时候,才会重新执行计算属性


计算属性

  1. computed: {
  2.   // 计算属性是有缓存性的,当在计算属性中使用到的data中定义的数据发生变化的时候,才会重新执行计算属性
  3.   // 函数是没有缓存性的,只要使用到函数,函数就会执行一次
  4.   total () {
  5.       return this.list.length + '门';
  6.   }
  7. },

侦听器

// 监听器是监听数据发生变化,则监听器中的方法重新执行,如果写成函数的形式,则在初始化的时候,监听器是不进行工作的. // 监听器如果写了配置项immediate为true,则监听器在初始化的时候就开始工作 // 监听器的deep为true时,则表示深层监听,不仅监听对象是否改变,还监听对象中的属性是否改变

  1. watch: {
  2.         // 监听器是监听数据发生变化,则监听器中的方法重新执行,如果写成函数的形式,则在初始化的时候,监听器是不进行工作的.
  3.         // 监听器如果写了配置项immediate为true,则监听器在初始化的时候就开始工作
  4.         // 监听器的deep为true时,则表示深层监听,不仅监听对象是否改变,还监听对象中的属性是否改变
  5.         totalCount () {
  6.           return this.list.length + '门'
  7.         },
  8.         totalCountI: {
  9.           immediate: true,
  10.           handler () {
  11.             return this.list.length + '门'
  12.           }
  13.         }
  14.       }

计算属性VS侦听器

  • 是什么
    • 计算属性是多个data中的数据影响一个数据
    • 侦听器是一个数据的变化影响多个数据的变化
  • 为什么
    • 计算属性是有缓存性的。
    • 侦听器如果没有在配置项中添加immediate为true的话，在页面初始化的时候，则不会执行侦听器的方法。
  • 怎么样
    • 监听器适用于执行异步操作，或者是执行较大开销的操作
    • 计算属性是执行异步操作影响最终的结果会无效。最好还是不要写异步

监听执行异步操作或较大开销操作器选项提供了通用的方法，适合执行异步操作或较大开销操作的情况