Vue计算属性和侦听器

一、计算属性 computed

作用:

  1. 将复杂的表达式从视图模板中抽离出来,便于维护,提高阅读性。
  2. 优化性能。用计算属性封装业务方法,用在指令上时,只有与其相关的声明式变量发生改变时才会重新计算。

特点:

  • 计算属性要定义在computed中,本质上它是个函数。
  • 计算属性可以当作响应式变量来使用,在js上可以用this访问
  • 计算属性默认是get操作,因而可以用在指令上
  • 计算属性与多个声明式变量相关时,任何一个声明式变量变化,计算属性都会重新计算。
  • 计算属性还可以用在v-model上,由于v-model有set功能,所以计算属性要拆成get/set形式。
 computed: {
        // 只具有get功能的计算属性
        full () {
          // do something
          // 在更新阶段时,如果first和last不发生变化,其它任何声明式变量发生变化,full()都不会重新运算。
          return this.first.toUpperCase() + '-' + this.last.toUpperCase()
        },
        // 具有get、set功能的计算属性
        full2: {
          get() { return `${this.first} ${this.last}`},
          set(newVal) {
            const arr = newVal.split(' ')
            this.first = arr[0] || ''
            this.last = arr[1] || ''
          }
        },
      }
    })

总结:当指令上的表达式过于复杂或不得不用函数调用时,建议封装成计算属性。

二、侦听器 watch

作用: 用于监听响应式变量的变化,例如:data、vuex、计算属性……

注意:

  1. watch对象中虽然放的是函数,但不能用this访问这些函数。但计算属性中可以用this访问。
  2. 不要随意用箭头函数,当watch函数是箭头函数时,它的this就不是当前组件实例了,而是window。

监听谁,watch函数中就是谁,名字要一致。

watch: {
        // 监听count的变化,当count变化时它所对应的函数会执行
        count(newVal, oldVal) {
          // do something
          console.log('count新值', newVal)
          console.log('count旧值', oldVal)
        }
        })

还可以用handler去监听响应式变量的变化

watch: {
        // 监听cc这个计算属性的变化
        cc: {
          handler() { console.log('cc变化了') }
        }
        })

当我们要监听的响应式变量内部有多层嵌套时,需要用handler,且要加上deep:true

你可能感兴趣的:(笔记,vue.js,javascript,前端)