Vue 计算属性，监听器，过滤器

计算属性

computed计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新。计算属性适合一个变量或者多个对象处理后返回一个结果值，也就是多个变量的某一个发生改变，我们监控的这个值也会改变。计算属性也依赖缓存，如果数据发生改变就会重新计算，如果不发生改变用之前的缓存结果。计算属性有两种方法，get和set.

使用方法

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
export default {
  name: "computed",
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
}

监听器

watch方法会实时监听属性的变化，并且改变属性的值。watch也具有缓存，如果监听的数据没有发生变化，会直接取缓存中的值。与computed的区别是没有返回值，监听器只能监听单个属性，但是计算属性中的方法体中可以依赖多个属性。

使用方法

<div id="watch-example">
  <p>
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>
<script>
export default {
  name: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = oldQuestion+'变为'+newQuestion
    }
  },
}
</script>

过滤器

过滤器可对数据进行筛选，过滤，格式化。可以定义全局的filter，也可以定义局部的。过滤器实则没有改变原始值，返回过滤后的结果。过滤器可以用在两个地方：双花括号插值和v-bind表达式；

使用方法

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
你可以在一个组件的选项中定义本地的过滤器：
filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}
或者在创建 Vue 实例之前全局定义过滤器：

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

计算属性和监视器的区别

计算属性 compued	监视器 watch
一个数据受多个数据影响	一个数据影响多个数据
不支持异步	支持异步
首次会运行	首次不会运行
有返回值	无返回值

计算属性和过滤器的区别

计算属性 compued	过滤器 filters
依赖于固定的实列，在某个实列中使用	不依赖实列，可以定义全局的过滤器，在多个实列中使用
不接受额外参数，依赖于data属性中的变量	过滤器不依赖于data属性中的变量，可以接受额外参数，可以是临时变量
有缓存机制	没有缓存机制
可以进行读写	只能读取
改变属性值	不改变原来的值，只是返回过滤后的值

更多关于vue的知识

vue文档