什么是计算属性？

Vue提供了计算属性来描述依赖响应式数据的复杂逻辑。

计算属性可以实时监听数据的变化，返回一个计算后的新值，并将计算结果缓存起来。只有计算属性中依赖的数据源变化了，计算属性才会自动重新求值，并重新加入缓存。

在组件中使用计算属性，分为以下2个步骤。

1. 定义计算属性

计算属性通过computed()函数定义，该函数的参数为一个回调函数，开发者需要在回调函数中实现计算功能，并在计算完成后返回计算后的数据，语法格式如下。

<script setup>
import { computed } from 'vue'
const 计算属性名 = computed(() => {
  return 计算后的数据
})
</script>

2. 输出计算属性

将计算属性定义好后，可以使用Mustache语法输出计算属性，语法格式如下。

{{ 计算属性名 }}

3. 演示计算属性的使用方法

<template>
  <p>初始message：{{ message }}</p>
  <p>反转之后的message：{{ reversedMessage }}</p>
  <button @click="updateMessage">更改</button>
</template>
<script setup>
import { ref, computed } from 'vue'
const message = ref('Hello World')
const reversedMessage = computed(() =>
  message.value.split('').reverse().join('')
)
const updateMessage = () => {
  message.value = 'hello'
}
</script>

什么是侦听器？

在Vue中，开发者可以自定义方法来进行数据的更新操作，但是不能自动监听数据的状态。如果想在数据更新后进行相应的操作，可以通过侦听器来实现。

侦听器通过watch()函数定义，watch()函数的语法格式如下。

watch(侦听器的来源, 回调函数, 可选参数)

watch()函数有3个参数，下面对这3个参数分别进行讲解。

第1个参数是侦听器的来源，侦听器的来源可以有以下4种。

• 一个函数，返回一个值。

• 一个响应式数据。

• 一个响应式对象。

• 一个由以上类型的值组成的数组。

第2个参数是数据发生变化时要调用的回调函数，这个回调函数的第1个参数表示新值，即数据发生变化后的值，第2个参数表示旧值，即数据发生变化前的值。

第3个参数是可选参数，它是一个对象，该对象有以下2个常用选项。

• deep：默认情况下，当侦听一个对象时，如果对象中的属性值发生了变化，则无法被监听到。如果想监听到，可以将该选项设为true，表示进行深度监听。该选项的默认值为false，表示不使用该选项。

• immediate：默认情况下，组件在初次加载完毕后不会调用侦听器的回调函数，如果想让侦听器的回调函数立即被调用，则需要将选项设为true。该选项的默认值为false，表示不使用该选项。

演示侦听器的使用方法

<template>
  <input type="text" v-model="cityName">
</template>
<script setup>
import { watch, ref } from 'vue'
const cityName = ref('beijing')
watch(cityName, (newVal, oldVal) => {
  console.log(newVal, oldVal)
})
</script>