vue3 ref 用法

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

1. ref

ref和reactive一样,也是用来实现响应式数据的方法

2.本质

ref底层其实还是reactive,所以当运行时系统会自动根据传入的ref转换成reactive

3.使用

1. 在vue中使用ref的值不用通过value获取
2. 在js中使用ref的值必须通过value获取

<template>
    <div>
        <button @clcik="domClick"></button>
        <p>{{ domText }}</p>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
const domText = ref<number>(1);
const domClick = () => {
    domText.value+=1;
}
</script>

通过ref 获取元素

<template>
    <div ref="devRef"></div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
const devRef = ref();

console.log(devRef.value);
onMounted(() => {
  // 页面挂载完后执行
  console.log(devRef.value);
});
</script>

【有修改请留言】