vue3 组合式api ref使用详解，以及使用ref绑定dom时，ref.value为undifend的注意事项

ref基本用法为使用ref()包裹数值，赋给变量

 

此变量变成ref对象，具有响应式，在template中可以直接使用，无需加.value，但是在setup中必须使用.value才能取到里面的值

ref也可以包裹对象，如下图

包裹对象时，本质上是把普通对象，变成reactive对象放入ref对象上的value值中，可以通过isReactive函数验证ref的value值，结果为true 

相较于reactive包裹对象完成响应式，ref更具优势，因为当改变reactive中保存的对象的内存地址时（也就是换一个全新的对象），由于vue3的响应式是通过创建代理对象，在代理对象的set方法中放入该实例的渲染函数的方法构建的，而替换整个对象，而不是修改对象内部的属性值，其并不会调用set方法，所以页面并不会响应式，但是如果使用ref包裹对象，那么此对象仅仅是ref对象的一个value属性，所以更改内存地址时，也仅仅是修改ref对象的value属性，依然会调用代理对象的set方法，完成响应式dom更新

 

ref函数不仅用于定义ref对象的响应式变量，也用于在vue中绑定Dom

我们依旧使用ref函数定义一个变量，但其中并不包裹任何值，并且在我们想要获取的dom上，写上属性ref=“我们定义的这个变量”，那么这个dom就被保存进这个变量了，代码如下图

我们也可以使用ref绑定子组件获取子组件实例，步骤一样，如下图

 

但无论是绑定dom，还是绑定子组件实例我们一定要注意以下两点！！！！！！！！！！！！！！！！！！！！！！！！！！！

第一，我们在setup中定义ref，绑定的dom或者是子组件，仅仅是他们的代理对象，此时真实的dom和子组件并没有被渲染出来，所以无法在setup中对其进行操作，此时获取其value值是undefind。

我们通常不会在setup中执行dom或组件实例操作，但是我们经常会在setup中进行传递数据操作（如传递函数参数），此时我们一定要注意，不可以传递value值，应该传递ref对象本身，因为此时真实的dom和子组件还没有被渲染出来，value值为undefind

当需要定义一些不是因为某些事件执行的函数，而是直接执行的函数时，我们可以把这些dom和子组件实例的操作函数放入onMounted（）生命周期中，当然还有一个比较巧妙的方法，是通过settimeout函数包裹，此函数被推入队列中，会在真实dom和子组件实例渲染后执行。也可以通过v-bind和ref结合，也就是:ref来实现，这个后面说。

第二，当我们不使用setup语法糖形式时（<script setup>），我们在setup中定义的东西时默认导出的，但是当我们使用setup语法糖形式时，我们定义的东西是默认私有的，此时父组件想从子组件实例上获取东西时，需要子组件通过defeneExpose方法，将对应属性暴露出去，否则父组件获取的子组件实例上将不存在这个属性

 

ref还有一中绑定方式，通过v-bind和ref结合绑定，绑定的值也不再是ref对象，而是一个函数，代码如下图

通过这种方式绑定的每个dom或是子组件，都会将自己实例的代理对象作为函数参数传入其中，由于不是传入ref对象，而是代理对象本身，所以可以直接调用dom或子组件实例的方法，不需要.value。与此同时，这个函数也会在真实dom和子组件渲染完成后调用，无需考虑其是否为undefind。

在setup生命周期函数中直接操作dom目前有三种方法，分别是 :ref，onMounted和settimeout，其中他们三个的执行顺序是 :ref >> onMounted >> settimeout，所以想直接操作dom或子组件实例时，我们最好选用:ref，它不仅最快运行，而且更加符合逻辑