详解Vue中的watch和computed

当我们在使用Vue.js框架时，经常会用到watch和computed这两个属性，这两个属性的作用是监控数据的变化并且触发响应。

watch属性

watch属性用于监听Vue实例数据的变化，当数据变化时触发一些回调函数。watch属性一般用于需要执行异步或复杂计算的场景，比如API请求或者复杂的数据过滤。一般来说，我们要对某个属性使用watch属性，需要在Vue实例的watch对象中定义一个同名的属性，并且设置一个监听回调函数。

下面是一个使用watch属性的示例，在这个案例中我们需要监听用户在输入框中输入的文字，然后通过Ajax请求API数据并渲染出来：

<template>
  <div>
    <input type="text" v-model="query">
    <ul>
      <li v-for="item in searchResult" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        query: '',
        searchResult: [],
      }
    },
    watch: {
      query(newQuery) { // 监听输入框的变化
        if (newQuery === '') return; // 不处理空字符串
        axios.get('https://api.example.com/search', { params: { q: newQuery } }).then(res => {
          this.searchResult = res.data.result;
        });
      }
    }
  }
</script>

在这个案例中，我们监听了输入框的变化，并且请求API数据，将数据赋值给searchResult属性。

computed属性

computed属性用于监听数据并且实时计算新的属性值。与watch属性不同的是，computed属性只需要定义一个属性的计算函数即可，Vue.js会自动为我们缓存计算后的值，基于依赖的数据变化，Vue.js也会自动更新计算后的值。

下面是一个使用computed属性的示例，在这个案例中，我们需要计算学生成绩的排名和平均值：

<template>
  <div>
    <ul>
      <li v-for="score in scores" :key="score.id">
        {{ score.name }}: {{ score.score }}
      </li>
    </ul>
    <p>
      平均分：{{ average }}
    </p>
    <p>
      排名：{{ ranking }}
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        scores: [
          { name: '张三', score: 80 },
          { name: '李四', score: 90 },
          { name: '王五', score: 70 },
          { name: '赵六', score: 85 },
        ]
      }
    },
    computed: {
      average() { // 计算平均分
        const total = this.scores.reduce((acc, score) => acc + score.score, 0);
        return (total / this.scores.length).toFixed(2);
      },
      ranking() { // 计算排名
        const scoresSorted = this.scores.slice().sort((a, b) => b.score - a.score);
        const index = scoresSorted.findIndex(score => score.score === this.scores[0].score);
        return index + 1;
      }
    }
  }
</script>

在这个案例中，我们使用computed属性分别计算了平均分和排名，computed属性自动监测依赖数据的变化并且实时计算新的值。

以上是watch和computed的完整攻略，希望对您有所帮助。