Vue计算属性与监视属性详细分析使用

Vue.js是一个非常流行的JavaScript前端框架，其中计算属性和监视属性是Vue.js中的两个重要概念。它们都被用来监听数据的变化，但是它们有着不同的用途和适用场景。

一、 Vue计算属性

Vue计算属性是指根据现有的属性计算得出的另一属性，即Vue.js中的“computed”。Vue计算属性可以非常方便地进行数据处理和关联操作，并且具有缓存功能，当依赖的数据没有发生变化时，它不会重新计算，而是直接返回之前缓存的结果。因此，使用计算属性不仅可以提高数据处理的效率，而且使代码更加优雅。

1.1 计算属性基本用法

在Vue实例中定义一个计算属性非常简单。只需要在Vue实例中挂载一个“computed”对象，这个对象里面包含一个或多个计算属性方法。下面是一个基本的示例：

<template>
  <div>
    <p>商品价格：{{price}}</p>
    <p>商品折扣：{{discount}}</p>
    <p>折扣价格：{{finalPrice}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originPrice: 100,
      discountRate: 0.8
    }
  },
  computed: {
    price() {
      return this.originPrice;
    },
    discount() {
      return this.discountRate * 100;
    },
    finalPrice() {
      return this.originPrice * this.discountRate;
    }
  }
}
</script>

上面的示例中，我们定义了三个计算属性，分别是“price”、“discount”和“finalPrice”。通过计算属性，我们可以方便地获取商品的原价（即“price”属性）、商品的折扣率（即“discount”属性）和商品的折扣价格（即“finalPrice”属性）。

1.2 计算属性与方法对比

计算属性与方法的功能类似，但是它们之间有一些重要的区别。相对于方法，计算属性可以更好地处理数据的缓存，因为计算属性只有在它依赖的数据发生变化时才会被重新计算，然后将计算结果缓存起来。而方法则不会缓存，它每次都会重新计算。因此，相对于方法，计算属性更加高效、方便和优雅。

下面的示例演示了计算属性与方法的区别：

<template>
  <div>
    <p>商品价格：{{price()}}</p>
    <p>商品折扣：{{discount()}}</p>
    <p>折扣价格：{{finalPrice()}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originPrice: 100,
      discountRate: 0.8
    }
  },
  computed: {
    price() {
      return this.originPrice;
    },
    discount() {
      return this.discountRate * 100;
    },
    finalPrice() {
      return this.originPrice * this.discountRate;
    }
  },
  methods: {
    getPrice(){
      return this.originPrice;
    },
    getDiscount(){
      return this.discountRate * 100;
    },
    getFinalPrice(){
      return this.originPrice * this.discountRate;
    }
  }
}
</script>

上面的示例中，我们定义了与之前相同的三个属性，只不过这次我们将折扣价格、商品价格和商品折扣作为方法定义在Vue实例中。因为这些方法不会被缓存，所以每次获取这些属性时，都会重新计算一次，这就使得代码效率较低，优雅度较低。

二、 Vue监视属性

Vue监视属性是指在属性发生变化时执行的一个函数，即“watch”属性。Vue监视属性可以用于监听数据的变化并进行响应操作，因此被广泛用于数据绑定和视图渲染。Vue监视属性不支持缓存功能，所以只有在数据发生变化时才会被触发，这使得Vue监视属性更加适合异步或复杂处理场景。

2.1 监视属性基本用法

在Vue实例中定义一个监视属性也很简单，只需要在Vue实例中挂载一个“watch”对象，然后在其中定义一个需要被监控的属性及其对应的回调函数。下面是一个基本的示例：

<template>
  <div>
    <p>商品价格：{{price}}</p>
    <button @click="setPrice">修改价格</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originPrice: 100,
      discountRate: 0.8,
      price: 80
    }
  },
  watch: {
    price(newVal, oldVal) {
      console.log(`价格变化：${oldVal} --> ${newVal}`);
    }
  },
  methods: {
    setPrice() {
      this.price = 90;
    }
  }
}
</script>

上面的示例中，我们通过按钮修改商品价格，同时通过监视属性watch监听价格属性的变化，并在发生变化时输出新旧价格的信息。

2.2 监视属性与计算属性对比

Vue监视属性和计算属性都有监听数据的变化的功能，但是适用于不同的场景。相对于计算属性，监视属性更加灵活、精细和强大。计算属性只能监听其依赖数据，而监视属性可以监听被监视数据的任何变化，这使得它适用于更广泛的场景。

下面的示例演示了监视属性对于异步场景的使用：

<template>
  <div>
    <p>用户名：{{username}}</p>
    <p>用户ID：{{userId}}</p>
    <button @click="getUserInfo">获取用户信息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      userId: ''
    }
  },
  watch: {
    userId(newVal, oldVal) {
      console.log(`用户ID变化：${oldVal} --> ${newVal}`);
      this.getUserInfo();
    }
  },
  methods: {
    getUserInfo() {
      setTimeout(() => {
        this.username = '张三';
      }, 1000);
    }
  }
}
</script>

上面的示例中，我们通过按钮获取用户信息，同时通过监视属性watch监听用户ID属性的变化，并在发生变化时执行getUserInfo()方法。getUserInfo()方法是一个异步方法，它模拟了一个网络请求，1秒后返回用户名。这里我们的目的是在获取用户ID后自动去获取对应的用户名，这是一种异步场景。通过监视属性，我们可以方便地实现这个功能。

三、 总结

在Vue.js中，计算属性和监视属性是两种不同的机制，可以通过它们来监听数据的变化并进行响应操作。计算属性用于处理依赖数据的复杂逻辑和关联操作，它具有缓存功能，提高了代码的效率和优雅度；监视属性用于监听任意数据的变化，可以更加灵活地处理异步或复杂操作流程。掌握这两种机制是Vue开发的基础，它们的灵活运用可以大大提高Vue应用的质量和效率。