前言

距离 vue3 发布已经两年多了，在 vue3 的使用过程中，我们经常会用到 ref 来声明变量，今天我们来聊一聊 ref 的用法。

过程

对比vue2

vue2 中通过使用 Object.defineProperty 来进行属性拦截，以达到响应式变量的效果，但是在 vue3 中，通过使用 Proxy 进行属性拦截。

用法一：响应式变量

vue2 中，我们通常在组件的 data() 中定义变量，这个变量就默认成为 响应式变量，但是 vue3 中引入了 setup 函数，在 setup 函数中，我们可以使用 ref 来定义响应式变量，代码如下：

const a = ref(1); 

这个时候，我们打印 a，其实是一个被 Proxy 包裹的 1，也就跟我们对比 vue2 中的响应式处理达成一致，当我们在 JavaScript 中使用这个响应式变量，我们需要读取变量的 .value 来拿到数据：

console.log(a.value) 

当我们在 template 中读取数据的时候，可以直接读取变量，而不需要 .value：

<div>{{ a }}</div> 

用法二：子组件调用

vue2 中，我们可以通过给子组件绑定 ref 使得在父组件中修改子组件的 data 中定义的 变量，代码如下：

<!-- 父组件 --> 
<div> 
  <child ref="childRef"></child> 
</div> 

<script> 
export default { 
  mounted(){ 
    this.$refs.childRef.getName() 
  } 
} 
<script> 

<!-- 子组件 --> 
<template> 
  <div>子组件</div> 
</template> 

<script> 
export default { 
  method:{ 
    getName(){ 
      console.log("子组件") 
    } 
  }
} 
</script> 

在 vue3 中，我们仍然可以使用 ref 调用子组件的方法，但写法上略有差异：

<!-- 父组件 --> 
<div> 
  <child ref="childRef"></child> 
</div> 

<script setup> 
  const childRef= ref(null); 
  childRef.value.getName(); 
</script> 

<!-- 子组件 --> 
<template> 
  <div>子组件</div> 
</template> 

<script setup> 
  const getName = () => { 
    console.log("子组件")
  } 
  defineExpose({ getName }) 
</script> 

其实最主要的区别在于：

1. vue2 中可以通过 this.$refs 获取当前组件的所有子组件，并操作其对应方法，vue3 中需要使用 ref 来进行定义，将定义的结果绑定给元素的 ref 属性，通过该变量来操作子组件的方法。
2. vue2 中凡是在子组件的 methods 中定义的方法都可以被调用，vue3 中仅有子组件中通过 defineExpose 抛出来的方法可以被调用。

结语

大家好，我是 webxue，是一名前端程序员儿，但不止于前端，如果对我的文章有自己的见解，欢迎评论区讨论，大家一起学习，一起进步~，共同探索 vue3 更多的使用技巧。最后，再次感谢你能看到此处！