Vue2 计算属性与侦听器

计算属性

基本用法

const vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  }
})

计算属性 vs 方法

// 计算属性
computed: {
  now() {
    return Date.now()
  }
}

// 方法
methods: {
  now() {
    return Date.now()
  }
}

计算属性是基于响应式依赖进行缓存的，只有相关响应式依赖发生改变时才会重新求值。

计算属性的 setter

computed: {
  fullName: {
    get() {
      return this.firstName + ' ' + this.lastName
    },
    set(newValue) {
      const names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

侦听器

基本用法

const vm = new Vue({
  el: '#app',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    question(newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  }
})

深度侦听

watch: {
  someObject: {
    handler(newValue, oldValue) {
      console.log('someObject changed')
    },
    deep: true
  }
}

立即执行

watch: {
  someData: {
    handler(newValue, oldValue) {
      console.log('someData changed')
    },
    immediate: true
  }
}

侦听对象属性

watch: {
  'someObject.a': function (val, oldVal) {
    console.log('new: %s, old: %s', val, oldVal)
  }
}

计算属性 vs 侦听器

使用计算属性

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName
  }
}

使用侦听器（不推荐）

watch: {
  firstName(val) {
    this.fullName = val + ' ' + this.lastName
  },
  lastName(val) {
    this.fullName = this.firstName + ' ' + val
  }
}

实际应用场景

表单验证

data: {
  email: ''
},
computed: {
  isValidEmail() {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    return re.test(this.email)
  }
}

过滤列表

data: {
  searchQuery: '',
  items: [...]
},
computed: {
  filteredItems() {
    return this.items.filter(item => {
      return item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    })
  }
}

异步操作

watch: {
  searchQuery: {
    handler(newQuery) {
      this.debouncedSearch(newQuery)
    },
    immediate: true
  }
},
methods: {
  debouncedSearch: _.debounce(function (query) {
    this.fetchResults(query)
  }, 500)
}