vue3 ref函数用法

1.在setup函数中，可以使用ref函数，用于创建一个响应式数据，当数据发生改变时，Vue会自动更新UI

<template>
?? ?<div>
?? ??? ?<h1>{{mycount}}</h1>
?? ??? ?<button @click="changeMyCount">changeMyCount</button>
?? ?</div>
</template>

<script>
import { ref } from "vue";
export default {
?? ?name: "ref",
?? ?setup(){
?? ??? ?const mycount = ref(2);
?? ??? ?const changeMyCount = ()=>{
?? ??? ??? ?mycount.value = mycount.value + 2 ;
?? ??? ?}
?? ??? ?
?? ??? ?return {
?? ??? ??? ?mycount,
?? ??? ??? ?changeMyCount,
?? ??? ?}
?? ?}
};
</script>

ref函数仅能监听基本类型的变化，不能监听复杂类型的变化（比如对象、数组）
监听复杂类型的变化可以使用reactive函数

2.通过ref属性获取元素
vue3需要借助生命周期方法，在setup执行时，template中的元素还没挂载到页面上，所以必须在mounted之后才能获取到元素。

<template>
?? ?<div>
?? ??? ?<div ref="box"><button>hehe</button></div>
?? ?</div>
</template>

<script>
import { ref } from "vue";
export default {
?? ?name: "ref",
?? ?setup(){
?? ??? ?const box = ref(null)
?? ??? ?onMounted(()=>{
?? ??? ??? ?console.log(box.value)
?? ??? ?})
?? ?}
};
</script>