Vue的计算属性和侦听器

computed计算属性

<div id='app'>
  {{message.split('').reverse().jion('')}}
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'hello vue!'
    },
  });
</script>

在上面的代码中我们使用插值将message倒置显示,但是插值表达式只能处理简单的逻辑,当逻辑更复杂的时候就需要用到computed了。

1. 使用computed

<div id='app'>
{{ reverseMessage }}
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'hello vue!'
    },
    computed: {
      reverseMessage: function(){
        return this.message.split('').reverse.join('');
      },
      getDate: function(){
        return new Date(); //该值在vue实例化的时候计算一次,之后不会再更新,因为没有依赖data
      },
    },
  });
</script>

重写计算属性的setter和getter

computed: {
  reverseMessage: {
    get: function(){ return this.message },
    set: function(val){
      this.message = val + new Date().getTime();
    },
  }
},

执行vm.reverserMessage = ‘i am 菜鸡’; reverseMessage将会重新计算

• 计算属性依赖data中的message,当message发生变化的时候,计算属性的函数会重新计算结果,页面会重新渲染。
• 计算属性是没有副作用(side effect)的,即不会改变原有data中的数据

2. 计算属性 VS 方法
   除了使用computed,method中也能做一些复杂的逻辑处理,那计算属性和方法的区别在哪呢?

• 响应机制不同,computed依赖data中的数据,当数据发生变化时会立即重新计算新的结果,页面重新渲染,当所依赖的数据没有发生变化时,多次访问不会重新计算。
• 方法在每次触发渲染的时候都会执行

在操作很长的列表,或者处理很复杂的逻辑的的时候使用computed性能会更好

watch 侦听属性

当数据发生变化时执行,vm.$watch功能一致

var vm = new Vue({
  el: '#app',
  data: {
    message: 'hello vue!',
  },
  computed: {
    message: function(newVal, oldVal){
      console.log(newVal, oldVal);
    },
  },
});

watch用于当数据发生变化时,做一些自定义的操作

总结

1. computed用于计算比较复杂的逻辑,根据data进行响应
2. 侦听器再属性变化的时候执行,可以响应一些用户自定义的操作