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>