Vue前端重构：computed及watch组件通信等实用技巧整理

前言

在Vue的开发过程中，我们时常需要对一些复杂的数据进行计算和转换，而Vue提供的computed属性能够很好地满足我们这方面的需求。此外，Vue还提供了watch属性来监控特定的数据变化。本文主要介绍computed及watch的使用方法和相关实用技巧。

computed属性的使用

computed属性是Vue的一种计算属性，它的值根据其他属性计算而来，computed属性中的方法只有在依赖的属性发生变化时才会重新计算，这样可以节省计算资源。下面是一个使用computed属性的例子：

<template>
  <div>
    <p>数量: {{ count }}</p>
    <p>总价: {{ totalPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 10,
      count: 2
    };
  },
  computed: {
    totalPrice() {
      return this.price * this.count;
    }
  }
};
</script>

在上面的例子中，当price或count属性值变化时，totalPrice方法会重新计算。而我们在模板中只用写{{ totalPrice }}就可以了。

watch属性的使用

watch属性用来监控数据的变化。当我们需要在数据发生变化时执行特定的代码时，就可以使用watch属性。下面是一个使用watch属性的例子：

<template>
  <div>
    <p>名字: {{ name }}</p>
    <p>年龄: {{ age }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: 0
    };
  },
  watch: {
    name(newValue, oldValue) {
      console.log(`名字由${oldValue}变为了${newValue}`);
    },
    age(newValue, oldValue) {
      console.log(`年龄由${oldValue}变为了${newValue}`);
    }
  }
};
</script>

在上面的例子中，我们使用watch来监控name和age属性的变化，当它们的值发生变化时，就会触发watch中的方法。

computed与watch组件通信

在Vue中，我们经常需要将父组件的数据传递给子组件，同时还要根据传递过来的数据进行计算。一个比较常见的场景是：父组件传递一个数组给子组件，子组件需要计算数组的长度。这个时候，我们可以结合computed和watch来实现组件之间的通信。

父组件

<template>
  <div>
    <p>总数: {{ count }}</p>
    <my-component v-bind:items="items" v-bind:count="count"></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';
export default {
  data() {
    return {
      items: ['a', 'b', 'c']
    };
  },
  components: {
    MyComponent
  },
  computed: {
    count() {
      return this.items.length;
    }
  }
};
</script>

在上面的例子中，我们将items数组传递给MyComponent组件，并使用count属性计算出了数组的长度。

子组件

<template>
  <div>
    <p>父组件传递来的数据: {{ items }}</p>
    <p>计算得到的长度: {{ count }}</p>
  </div>
</template>

<script>
export default {
  props: ['items', 'count'],
  watch: {
    items(newValue, oldValue) {
      this.$emit('update:count', newValue.length);
    }
  }
};
</script>

在上面的例子中，我们使用watch来监控items属性的变化，当items数组的长度发生变化时，就会触发watch中的方法，并且使用$emit方法来触发一个名为update:count的事件，将计算得到的长度传递给父组件。这时我们就可以在父组件中使用v-bind指令对count属性进行绑定，从而实现了组件之间的通信。