vue3 ref获取dom节点原理

为啥 const myDiv = ref(null)  这样就获得了myDiv的Dom节点了呢？？？

     Vue3是一款流行的JavaScript框架，它提供了许多方便的功能来帮助开发者构建交互式的Web应用程序。其中，ref是Vue3中一个非常重要的功能，它可以用来获取DOM节点，从而实现对DOM节点的操作。
     ref的原理很简单，它实际上是一个特殊的对象，可以用来存储对DOM节点的引用。在Vue3中，我们可以使用ref函数来创建一个ref对象，例如：
 

<template>
	<div ref="myDiv">Hello, World!</div>
</template>
<script>
	import { ref } from 'vue'
	export default {
	    setup() {
			const myDiv = ref(null)
			return {
				myDiv
			}
		}
	}
</script>

     在上面的代码中，我们使用ref函数创建了一个名为myDiv的ref对象，并将其绑定到了模板中的一个div元素上。在setup函数中，我们通过调用ref函数并传入null来创建了一个初始值为null的myDiv对象。然后，我们将myDiv对象返回给模板，这样就可以在模板中使用它了。

     在模板中，我们可以使用v-bind指令将myDiv对象绑定到div元素的ref属性上，例如：

<template>
	<div ref="myDiv">Hello, World!</div>
</template>

    这样，当组件被渲染时，Vue3会自动将myDiv对象与div元素建立关联，从而使我们可以通过myDiv对象来访问和操作div元素。
    例如，我们可以在组件的方法中使用myDiv.value来获取div元素的引用，例如：

<template>
<div ref="myDiv">Hello, World!</div>
<button @click="handleClick">Click me!</button>
</template>

<script>
	import { ref } from 'vue'
	
	export default {
		setup() {
			const myDiv = ref(null)
			const handleClick = () => {
				console.log(myDiv.value)
			}
			return {
				myDiv,
				handleClick
			}
		}
	}
</script>

     在上面的代码中，我们定义了一个名为handleClick的方法，当按钮被点击时，它会使用myDiv.value来获取div元素的引用，并将其打印到控制台中。
    ref是Vue3中一个非常重要的功能，它可以用来获取DOM节点，从而实现对DOM节点的操作。通过使用ref函数创建ref对象，并将其绑定到模板中的DOM元素上，我们可以轻松地访问和操作DOM节点，从而实现更加灵活和交互式的Web应用程序。