vue观察属性和计算属性

在Vue中，观察属性和计算属性是两种不同的属性类型。

观察属性（Watch Property）是在数据发生变化时执行副作用的一种方式。当观察的属性发生变化时，可以执行一个回调函数来处理额外的逻辑。观察属性通常用于监听数据的变化并做出相应的响应。下面是一个例子：

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  watch: {
    message(newValue) {
      console.log('观察到message属性变化:', newValue);
      // 在这里可以执行其他的逻辑
    }
  }
};
script>

在上面的例子中，我们通过v-model指令绑定了一个输入框和message属性，当输入框的值发生变化时，会触发message属性的变化，然后watch选项中定义的观察函数会被触发。

计算属性（Computed Property）是根据已有属性的值计算出一个新的属性值。计算属性会缓存计算结果，只有当相关的依赖发生改变时，才会重新计算。计算属性通常用于处理一些需要根据多个属性计算得出的结果。下面是一个例子：

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

在上面的例子中，我们定义了两个属性price和quantity，然后通过计算属性totalPrice来计算出总价格，每当price或quantity的值发生变化时，totalPrice会被重新计算并且更新。