详解Vue3 中的计算属性及侦听器

计算属性

计算属性是Vue中一种非常常见的属性类型，可以根据其他数据的变化而自动更新。在Vue3中，计算属性的写法有所变化，需要使用computed方法来定义。

<template>
  <div>
    <p>商品价格: {{ price }}</p>
    <p>打折后价格: {{ discountPrice }}</p>
  </div>
</template>

<script>
import { computed } from 'vue'

export default {
  data() {
    return {
      originalPrice: 100,
      discount: 0.8
    }
  },
  computed: {
    price() {
      return this.originalPrice
    },
    discountPrice() {
      return this.price * this.discount
    }
  }
}
</script>

在上述示例中，我们定义了一个计算属性discountPrice，它依赖于price和discount两个属性。当原价或折扣发生变化时，discountPrice会自动更新。

侦听器

侦听器用于监听某个属性的变化，并在变化时执行一些操作。在Vue3中，可以使用watch方法来实现侦听器。

<template>
  <div>
    <p>当前屏幕尺寸: {{ screenSize }}</p>
  </div>
</template>

<script>
import { watch, ref } from 'vue'

export default {
  setup() {
    const screenSize = ref('')
    watch(screenSize, (newVal, oldVal) => {
      console.log(`屏幕尺寸从${oldVal}变为${newVal}`)
    })
    window.addEventListener('resize', () => {
      screenSize.value = `${window.innerWidth}x${window.innerHeight}`
    })
    return {
      screenSize
    }
  }
}
</script>

在上述示例中，我们通过watch方法来监听一个名为screenSize的响应式变量。当该变量的值发生变化时，会自动调用回调函数并输出旧值和新值。同时，我们通过addEventListener监听窗口大小变化事件，当窗口大小发生变化时，会自动更新screenSize的值。由于screenSize是响应式变量，因此更新后会自动重新渲染视图，从而实现屏幕尺寸的实时更新。

总的来说，计算属性和侦听器都是Vue3中非常实用的功能，可以用于自动计算属性值和监听属性变化，并在变化时自动更新视图。