vue---computed计算属性的使用

一直以来在使用vue的时候，会对vue的computed属性和watch属性具体的使用分不清楚，总算花点时间整理了下。

computed:通常用于监控自己定义的变量，这个变量可以不再data中定义，直接在computed里面定义，然后可以在页面上做双向数据绑定得到这个数据。通常的使用场景：添加商品到购物车，商品数量和总金额会发生变化，如果用watch来做监听就会比较麻烦，使用computed来做监听是最好的选择。

watch:通常用于监听data里面定义好的变量。通常用于 model 做双向数据绑定的监听，可以监听变量，也可以监听一个对象，但是我们不能这样来监听。

watch:{
    goodsList.price(newVal,oldVal){
        //监控商品列表中是商品价格
    }
}

这样监听会报错。

详细说下计算属性：

计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。

在Vue中有多种方法为视图设置值：

使用指令直接将数据值绑定到视图
使用简单的表达式对内容进行简单的转换
使用过滤器对内容进行简单的转换

除此之外，我们还可以使用计算属性根据数据模型中的值或一组值来计算显示值。

举个简单的例子：

<template>
  <div class="app-container">
    <span v-text="title"></span>
    <ul>
      <li v-for="x in results">
        {{x.name}}: <input type="text" v-model="x.score">
      </li>
    </ul>
    <p>总分：{{totalMarks}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
        title:'我是一个计算器',
        results:[
          {name:'English',score:80},
          {name:'Math',score:90},
          {name:'History',score:70},
        ]
    }
  },
  methods: {
  },
  computed:{
    totalMarks:function(){
      let total = 0;
      let self = this;
      for(let i = 0; i < self.results.length; ++i){
        total += parseInt(self.results[i].score);
      };
      return total;
    }
  }
}
</script>

<style scoped>
*{margin:0px; padding:0px;}
</style>

除此之外，computed计算属性还提供 get 和 set 方法来使用。

具体参考：https://www.cnblogs.com/gunelark/p/8492468.html

vue---computed计算属性的使用

猜你喜欢