Vue - 计算属性、观察者(二)

computer：计算属性get方法

<div id="testDiv">
<span>英语：</span><input type="text" v-model="englishScore"/><br/>
<span>数学：</span><input type="text" v-model="mathsScore"/></br>
<span>总分：</span><input type="text" v-model="totalScore"/></br>
</div>
<script>
new Vue({
  el: 'testDiv',
  data: {
    englishScore: 80,
    mathsScore: 90,
    totalScore: 100
  },
  computed: {
    // get方法的简写形式
    //当englishScore或mathsScore值发生变化时，totalScore中的get方法被调用
    totalScore : function() {
      return (this.englishScore - 0) + (this.mathsScore - 0);
    }
  }
})
</script>

computer：计算属性get set方法

set:function(newValue) { }
当totalScore值发生变化时，set被调用，newValue为变化后的值

<div id="testDiv">
<span>英语：</span><input type="text" v-model="englishScore"/><br/>
<span>数学：</span><input type="text" v-model="mathsScore"/></br>
<span>总分：</span><input type="text" v-model="totalScore"/></br>
</div>
<script>
new Vue({
  el: 'testDiv',
  data: {
    englishScore: 80,
    mathsScore: 90,
    totalScore: 100
  },
  computed: {
    totalScore : {
      get:function() {
         return  (this.englishScore - 0) + (this.mathsScore - 0);
      } 
      set:function(newValue) {
           var avg = newValue / 2;
           this.englishScore = avg;
           this.mathsScore = avg;
      }
    }
  }
})
</script>

watch：观察者

观察者绑定的元素发生变化时，watch中的方法被调用

<div id="testDiv">
<span>英语：</span><input type="text" v-model="englishScore"/><br/>
<span>数学：</span><input type="text" v-model="mathsScore"/></br>
<span>总分：</span><input type="text" v-model="totalScore"/></br>
</div>
<script>
new Vue({
  el: 'testDiv',
  data: {
    englishScore: 80,
    mathsScore: 90,
    totalScore: 100
  },
  watch: {
    englishScore: function(newValue, oldValue) {
      this.totalScore = (newValue - 0) + (this. mathsScore - 0);
    }
  }
})
</script>

ps:
methods 方法
在我们使用 Vue 时可能会有很多方法会被放到这里，比如它可能是我们的事件处理方法，一些操作方法的逻辑等等，但是它不能跟踪任何依赖，而且还会在每次组件重新加载时都会执行，这就会导致我们的方法会执行很多次，如果我们的 UI 操作频繁的话，会导致性能的问题，所以在一些开销比较大的计算时，我们应该尝试其他方案进行优化处理。

computed 计算属性

从名字我们其实大概的可以看出，它是一个依赖于其他属性的，当依赖的属性发生变化的时候就会触发我们计算属性的逻辑，而且是基于它们依赖的属性进行缓存的，也就是说只有当依赖的属性发生变化的时候才会从新求值。

相比 methods 的优势在于不必每次从新执行定义的函数，这给我们的性能上有着很大的优势，对我们已经存在的数据属性非常好的处理方式，例如我们案例中 fullName 的计算，优势非常明显。

watcher 观察者

当一些数据属性变化时，我们执行一些逻辑时观察者对我们非常重要，它可以帮助我们监听属性的变化，只要属性发生变化，我们就可以执行对应的一些操作。

最后编辑于：2020.05.31 12:28:09