vue中的计算属性和侦听属性

当我们在使用Vue.js开发Web应用时，有时我们需要根据某些状态进行计算，计算属性和侦听属性是Vue.js为我们提供的两种响应式的计算机制。本文将详细讲解vue中的计算属性和侦听属性的完整攻略。

计算属性

什么是计算属性

计算属性指的是在模板中使用时，通过计算属性函数的返回值来得到一个新的值，这个新的值能够自动触发页面重新渲染。

计算属性的用法

计算属性的定义方式如下：

computed: {
  prop1: function () {
    // 计算逻辑
    return someValue;
  }
}

其中，prop1 表示计算属性的名称，someValue 表示计算结果的值，计算逻辑就在 function 中实现。

在组件的模板中，我们可以直接使用 prop1 进行渲染，如下所示：

<div>
  {{prop1}}
</div>

计算属性将在页面渲染时自动计算，并返回计算结果的值，同时触发页面重新渲染。

计算属性的示例1

假设我们需要在页面中展示一个商品的总价格，这个总价格等于商品数量和单价的乘积。我们可以使用计算属性来计算这个商品的总价格，示例代码如下：

<template>
  <div>
    <span>单价：{{price}}元</span>
    <span>数量：{{quantity}}个</span>
    <span>总价格：{{totalPrice}}元</span>
  </div>
</template>
<script>
export default {
  name: "Goods",
  data() {
    return {
      price: 10,
      quantity: 2
    }
  },
  computed: {
    totalPrice: function () {
      return this.price * this.quantity;
    }
  }
}
</script>

上面的示例中，我们定义了一个计算属性 totalPrice，它的计算逻辑为 price * quantity，在页面中使用 totalPrice 来展示商品的总价格。

计算属性的示例2

我们可以使用计算属性来格式化时间，示例代码如下：

<template>
  <div>
    <span>当前时间：{{currentTime}}</span>
  </div>
</template>
<script>
export default {
  name: "Time",
  computed: {
    currentTime: function () {
      let date = new Date();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();
      let time = `${hour}:${minute}:${second}`;
      return time;
    }
  }
}
</script>

上面的示例中，我们定义了一个计算属性 currentTime，它的计算逻辑为获取当前的时间，并根据时、分、秒来格式化时间。

侦听属性

什么是侦听属性

侦听属性的作用是当一个数据发生变化时，执行一些特定的操作，实现数据的自动更新。

侦听属性的用法

侦听属性的定义方式如下：

watch: {
  prop1: function (value, oldValue) {
    // value表示新的值，oldValue表示旧的值
    // 执行相关操作
  }
}

在 watch 中我们可以定义一个函数，当 prop1 的值发生变化时，这个函数将会被调用。在这个函数中我们可以执行一些特定的操作来更新UI界面。

侦听属性的示例1

我们可以使用侦听属性来监听商品数量的变化，并更新商品的总价格，示例代码如下：

<template>
  <div>
    <span>单价：{{price}}元</span>
    <span>数量：<input type="number" v-model="quantity" /></span>
    <span>总价格：{{totalPrice}}元</span>
  </div>
</template>
<script>
export default {
  name: "Goods",
  data() {
    return {
      price: 10,
      quantity: 2,
      totalPrice: 0
    }
  },
  watch: {
    quantity: function (value, oldValue) {
      this.totalPrice = value * this.price;
    }
  }
}
</script>

上面的示例中，我们为 quantity 定义了一个侦听属性，每当 quantity 的值发生变化时，侦听属性中的函数将会被调用，并更新 totalPrice。

侦听属性的示例2

我们可以使用侦听属性来监听窗口大小的变化，并更新UI界面，示例代码如下：

<template>
  <div>
    <span>宽度：{{width}}像素</span>
    <span>高度：{{height}}像素</span>
  </div>
</template>
<script>
export default {
  name: "WindowSize",
  data() {
    return {
      width: window.innerWidth,
      height: window.innerHeight
    }
  },
  watch: {
    width: function (value, oldValue) {
      console.log('宽度变化了：', value, oldValue);
    },
    height: function (value, oldValue) {
      console.log('高度变化了：', value, oldValue);
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.width = window.innerWidth;
      this.height = window.innerHeight;
    });
  }
}
</script>

上面的示例中，我们定义了两个侦听属性 width 和 height，监听窗口大小的变化，并在UI界面进行输出。

总结

计算属性和侦听属性是Vue.js为我们提供的两种响应式的计算机制，其中，计算属性能够根据某个状态进行计算，侦听属性能够根据某状态的变化进行自动更新，可帮助我们快速实现复杂的逻辑，提高开发效率。