Vue计算属性和监听器

计算属性（computed）

date属性和computed属性定义的值都可以直接绑定在表达式中，如果某些值需要通过计算才能得到，那使用计算属性就再合适不过了

如果页面中需要显示的值是两个表达式计算才能得到，并且还有一些比较复杂的逻辑关系，我们写在页面上就不太合适了
如果我们直接在页面上是这样的：

<template>
  <div id="app">
    <p>{{ firstName + lastName }}</p>
  </div>
</template>

<script>

export default {
  data() {
    return{
      firstName:"小",
      lastName:"曹"
    }
  }
}
</script>

<style>
</style>

如果使用计算属性来实现的话

直接在computed中写函数即可，然后在表达式中写computed中定义的函数名即可

<template>
  <div id="app">
    <p>{{ name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return{
      firstName:"小",
      lastName:"曹"
    }
  },
  computed: {
    name() {
      return this.firstName+this.lastName
    }
  }
}
</script>

<style>
</style>

最后都能实现如下效果：

以上示例都还不是太清楚，我们再举一个例子

购物清单
总价=单价 * 数量 * 打折
计算属性会将所给值的变化，自动地给出计算结果

<template>
  <div id="app">
    <h1>计算属性和监听器</h1>
    <p>单价：{{price}}</p>
    <p>折扣：{{discount}}</p>
    <p>数量：
      <button @click="sub">-</button>
      {{quantity}}
      <button @click="add">+</button>
    </p>
    <p>总价：{{totalPrice}}</p>
  </div>
</template>

<script>

export default {
  data() {
    return{
      price:20,
      quantity:0,
      discount:0.5
    }
  },
  computed: {
    totalPrice() {
      return this.price * this.quantity * this.discount
    }
  },
  methods: {
    add() {
      this.quantity++
    },
    sub() {
      if(this.quantity>0)
      this.quantity--
    }
  }
}
</script>

<style>
</style>

侦听器（监听一个属性的变化）

格式：
quntity(val)就等于监听的quntity这个变量，val是监听到的变化后的值

watch: {
    quantity(val) {
      this.totalPrice = this.price * val * this.discount
    }
  },

我们把刚才的计数器改成使用侦听器来实现

<template>
  <div id="app">
    <h1>计算属性和监听器</h1>
    <p>单价：{{price}}</p>
    <p>折扣：{{discount}}</p>
    <p>数量：
      <button @click="sub">-</button>
      {{quantity}}
      <button @click="add">+</button>
    </p>
    <p>总价：{{totalPrice}}</p>
  </div>
</template>

<script>

export default {
  data() {
    return{
      price:20,
      quantity:0,
      discount:0.5,
      totalPrice:0
    }
  },
 watch: {
    quantity(val) {
      this.totalPrice = this.price * val * this.discount
    }
  },
 methods: {
    add() {
      this.quantity++
    },
    sub() {
      if(this.quantity>0)
      this.quantity--
    }
  }
}
</script>

<style>
</style>

以上的例子，侦听器也能做，计算属性也能做，那我们什么时候应该用哪个？

计算属性与侦听器的对比

一个值的改变，会影响多个值（或处理多件事），使用侦听器（性能消耗更高）。
监测路由的时候只能使用监听器来实现

(为了观察一个值)多个值的改变，为了得到一个结果，使用计算属性。(为了得到一个值)

实际开发中，大部分问题都可以用computed解决。