vue3怎么定义计算属性和监听属性

在Vue3中，定义计算属性和监听属性的方式有所变化。下面分别介绍：

1. 定义计算属性

在Vue3中，定义计算属性需要使用`computed`函数，该函数可以接收一个对象作为参数，对象中的属性名即为计算属性的名称，属性值为计算属性的getter和setter函数。

例如，定义一个计算属性`fullName`，它依赖于`firstName`和`lastName`两个属性：

import { computed, reactive } from 'vue'

const user = reactive({
  firstName: 'John',
  lastName: 'Doe',
})

const fullName = computed(() => {
  return `${user.firstName} ${user.lastName}`
})

console.log(fullName.value) // 'John Doe'

在上面的例子中，我们通过`computed`函数定义了一个名为`fullName`的计算属性，它的getter函数返回了`user.firstName`和`user.lastName`的拼接字符串。

需要注意的是，计算属性的getter函数必须返回一个值，否则会报错。

2. 监听属性

在Vue3中，监听属性需要使用`watch`函数，该函数需要接收两个参数，第一个参数是要监听的属性的值，第二个参数是一个回调函数，当属性的值发生变化时会触发该回调函数。

例如，定义一个监听属性`age`，当它的值发生变化时输出变化后的值：

import { watch, reactive } from 'vue'

const user = reactive({
  name: 'John',
  age: 18,
})

watch(
  () => user.age,
  (newVal, oldVal) => {
    console.log(`age changed from ${oldVal} to ${newVal}`)
  }
)

user.age = 20 // 'age changed from 18 to 20'

在上面的例子中，我们使用`watch`函数监听了`user.age`属性的变化，当它的值发生改变时会执行回调函数。在回调函数中，我们输出了变化前后的值。

需要注意的是，`watch`函数的第一个参数必须是一个函数，该函数返回的值就是要监听的属性的值。在上面的例子中，我们使用了箭头函数来返回`user.age`的值。