Vue 3 中的数据绑定是通过模板语法实现的。开发者可以在模板中使用特殊的语法来绑定数据，例如使用双花括号 {{}} 来显示数据，或者使用 v-bind 指令来绑定属性。
当数据发生变化时，Vue 会自动更新绑定的数据在模板中的显示，实现页面的自动更新。
虽然 Vue 的响应式数据驱动模式非常强大，但有时直接访问底层 DOM 元素是必要的。
vue3 内置的特殊属性ref
ref 是一个特殊的 attribute，它允许在一个特定的 DOM 元素或子组件实例被挂载后，获得对它的直接引用。
ref用于注册元素或子组件的引用。ref参数类型：string | Function- 当使用字符串作为参数时，这个字符串将作为引用的名称，可以在组件的逻辑部分通过
this.$refs[refName]来访问对应的元素或组件实例。 - 当使用函数作为参数时，这个函数将在组件挂载后被调用，函数的参数是对应的元素或组件实例。
- 当使用字符串作为参数时，这个字符串将作为引用的名称，可以在组件的逻辑部分通过
使用选项式 API，引用将被注册在组件的 this.$refs 对象里
<!-- 存储为 this.$refs.p -->
<p ref="p">hello</p>
使用组合式 API，引用将存储在与名字匹配的 ref 里
用在普通DOM标签上，获取的是DOM节点
示例：
<template><div><div ref="domDiv">hi, 这是有ref属性的div</div><button @click="showLog">点击输出div</button></div>
</template><script setup lang="ts" name="Person">
import { ref } from 'vue';// 创建一个名为domDiv的响应式引用，用于存储ref标记的内容
let domDiv = ref()
// 初始化时立即打印，此时组件还未挂载，domDiv.value 必然为 undefined
console.log(domDiv.value) // undefinedconst showLog = () => {console.log(domDiv.value)
}</script>
用在组件标签上，获取的是组件实例对象
在Parent.vue引用Child.vue：
<template><div><Child ref="cihldRef" /><button @click="showChildRef">点击输出childRef</button></div>
</template><script setup lang="ts" name="Person">
import { ref } from 'vue';
import Child from './Child.vue';
//
let cihldRef = ref()
const showChildRef = () => {console.log(cihldRef.value)
}
</script>
一旦组件被挂载，cihldRef.value 将指向对应的组件实例对象。通过这个实例对象，可以调用组件的方法、访问组件的属性等。
打印cihldRef.value ，控制台输出结果如下：
子组件Child.vue没有暴露任何属性、方法给父组件。
defineExpose
当一个组件使用组合式 API 编写时，默认情况下，父组件无法直接访问子组件内部定义的响应式变量和方法。
通过使用defineExpose，可以有选择地将子组件内部的一些属性和方法暴露给父组件。
这是上面例子中的Child.vue:
<template><div><div>count: {{ count }}</div><button @click="addCount">点击 count+1</button></div>
</template>
<script setup lang="ts">
import { ref } from 'vue';let count = ref(0);const addCount = () => {count.value++;
};// 把属性count、方法addCount暴露给父组件
defineExpose({count,addCount
});
</script>
在父组件Parent.vue中执行console.log(cihldRef.value)，控制台输出结果：
可以看到，子组件Child.vue把属性count、方法addCount暴露给父组件Parent.vue。
在父组件Parent.vue中，调用子组件的addCount：
const showChildRef = () => {console.log(cihldRef.value)cihldRef.value.addCount()
}
ref 可以接收一个函数值，用于对存储引用位置的完全控制
在模板中，当使用 ref 并传入一个函数时，这个函数会在组件挂载后被调用，并且接收被引用的组件实例或 DOM 元素作为参数。
示例：
<template><ChildComponent :ref="(el) => child = el" />
</template>
在这个例子中，当 <ChildComponent> 组件挂载后，传入的函数 (el) => child = el 会被调用，参数 el 代表 <ChildComponent> 组件的实例。这个函数将组件实例赋值给了外部定义的变量 child，从而可以在其他地方通过 child 来访问 <ChildComponent> 组件的实例。
