vue3 ref 理解与用法

1. ref

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

2.本质

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

3.使用

① 在vue中使用ref的值不用通过value获取

② 在js中使用ref的值必须通过value获取

<template>
    <div>
        <button @click="click"></button>
        // 直接引用变量获取值
        <p>{
   
   {num}}</p>
    </div>
</template>
<script lang="ts">
import { defineComponent,ref } from 'vue'

export default defineComponent({
    setup() {
        // 声明双向数据ref
        const num=ref()
        // js 通过.value 获取值
        num.value=123;
        const click = ()=>{
            num.value+=1;
        }
        return {
            num,
            click
            }
    },
})
</script>

③通过ref 获取元素

在vue2中我们可以通过给元素添加ref=‘xxx’,然后在代码中通过refs.xxx的方式来获取元素,在vue3中也可以通过ref来获取元素.但不是像以下这种熟悉的方式,因为在vue3中没有$和refs这些东西.

<template>
    <div ref="div">
     这个是div
    </div>
</template>
<script lang="ts">
import { defineComponent,onMounted,ref } from 'vue'

export default defineComponent({
    setup() {
       const div=ref(null) //本质是reactive({value:null})
       // 错误用法
       // this.$refs.div

       //正确用法

       // 需要再onMountd 生命周期内使用
       onMounted(()=>{ 
           // 界面挂载完后 会执行
           console.log(div.value)
       })
       //接受的是null,原因是setup执行时机比mounted早,dom还没形成 注意vue3的生命周期
        console.log(div.value);// 执行早于 onMounted
        return {
            div
            }
    },
})
</script>
... 

输出结果
  null
  <div>这个是div</div>

vue3 ref 理解与用法

猜你喜欢