Vue的methods、computed与filters

vue的方法methods、计算属性computed和过滤器filters专栏。

1.三者功能使用

<div id="app">
  <p>原字符串: {{ message }}</p>
  <p>methods字符串: {{ messageMet()}}</p>   //--> methods字符串：!boonuR
  <p>conputed反转字符串: {{ messageCom }}</p> //--> conputed字符串：!boonuR
  <p>filters反转字符串: {{ message | messageFil }}</p> //--> filters字符串：!boonuR
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  methods:{
	  messageMet(){
	  	return this.message.split('').reverse().join('')
	  }
  },
  computed: {
    // 提供的函数将用作messageCom的getter
    // 值依赖于 vm.message，在 vm.message 发生改变时，vm.messageCom也会更新。
	  messageCom(){
	  	return this.message.split('').reverse().join('')
      }
  },
  filters: {
	  messageFil (val) {
	  	return val.split('').reverse().join('')
      }
  },
})
</script>

2.比较异同

methods与computed的 异同

• 同：响应功能一致
• 异：methods在重新渲染时函数会重新调用执行；computed基于依赖缓存，只有相关依赖发生改变时才会重新取值

computed与filters的异同

• 同：所有值都需要return出去
• 异：如下表所示：

方面	computed	filters
依赖实例	依赖于一个固定的vue实例 ，在某一个实例中使用	不依赖于实例。可以 定义一个全局过滤器，在多个实例中使用
参数/变量	不接受额外参数，依赖于data属性中的变量	不要求是data中的变量，可以是临时变量。可接受额外参数
缓存	有缓存管理机制，可减少页面调用次数	无缓存机制，调用次数，取决于页面中有所多少过滤器
可读可写	计算属性虽默认为只读，但可以定义为对象，开启可读可写模式	只能读取操作
使用	计算属性被作为一个类属性调用	过滤器被作为一个特殊方法处理