vue3 ref 理解与用法

末蓝、 2023-09-29 11:42 6阅读 0赞

**1. ref**

ref和[reactive][]一样,也是用来实现[响应式数据][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>

[reactive]: https://blog.csdn.net/sinat_37792529/article/details/124361265?spm=1001.2014.3001.5502