vue3中的ref检查属性的变化

在 Vue3 中，可以使用 `ref` 和 `watch` 来检查属性的变化。

`ref` 是一个用于创建响应式数据的函数，可以将其应用到 HTML 元素、组件实例、普通对象等上面。在组件中使用 `ref` 可以获取组件实例或 HTML 元素，然后使用 `watch` 监听其属性的变化。

下面是一个示例：

<template>
  <div>
    <input ref="input" v-model="value" />
    <p>输入的值为: {{ value }}</p>
  </div>
</template>

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

export default {
  setup() {
    const value = ref('')
    const inputRef = ref(null)

    watch(inputRef, (el) => {
      // 监听 input 元素的 value 属性变化
      console.log(el.value)
    })

    return {
      value,
      inputRef
    }
  }
}
</script>

在上面的示例中，我们创建了一个 `value` 变量和一个 `inputRef` 变量，分别用于保存输入框的值和输入框的引用。然后使用 `watch` 监听 `inputRef` 的变化，当其变化时，打印出输入框的值。

需要注意的是，在 Vue3 中，使用 `ref` 获取 HTML 元素时，需要使用 `.value` 来获取元素的属性或方法。例如，`inputRef.value.value` 就可以获取输入框的值。