Vue3的Composition API 中如何使用useRef和useEffect

今天我们聊聊Vue3的Composition API，特别是useRef和useEffect这两个超有用的钩子函数。

首先，我们来谈谈useRef。这个函数可以让你创建一个可变的值，就像哆啦A梦的道具一样，可以在不同的时刻使用它，它都能保持同样的状态。比如说，你可以用它来存储一个DOM元素的引用，或者一个计算属性的结果。我们来看看咋们咋样使用它吧！

import {
    
     useRef } from 'vue'  
  
export default {
    
      
  setup() {
    
      
    const countRef = useRef(0)  
  
    function increment() {
    
      
      countRef.value++  
    }  
  
    function decrement() {
    
      
      countRef.value--  
    }  
  
    return {
    
      
      countRef,  
      increment,  
      decrement,  
    }  
  },  
}

在这个例子中，我们创建了一个countRef，它可以存储一个数字。然后我们定义了两个函数increment和decrement，它们分别用于增加和减少countRef的值。最后，我们通过return将countRef以及两个函数一起返回出去，这样我们就可以在组件中使用它们了。是不是很简单？

接下来，我们来谈谈useEffect。这个函数可以让你在组件渲染完成后执行一些副作用操作，比如更新DOM元素、调用API、订阅事件等等。你可以把它想象成一个魔法笔记本，每次你写下一个愿望，它都能帮你实现。我们来看看咋们咋样使用它吧！

import {
    
     useEffect } from 'vue'  
  
export default {
    
      
  setup() {
    
      
    const countRef = useRef(0)  
  
    useEffect(() => {
    
      
      console.log('组件已渲染')  
      countRef.value++  
    }, [])  
  
    return countRef.value  
  },  
}

在这个例子中，我们使用了useEffect来在组件渲染后打印一条消息，并将countRef的值加1。注意哦，我们传入的数组为空，这意味着我们的副作用操作只会在组件初次渲染时执行一次。如果你想要副作用操作在组件更新时也执行，可以将数组留空或者传入一个非空数组。比如这样：

import {
    
     useEffect } from 'vue'  
  
export default {
    
      
  setup() {
    
      
    const countRef = useRef(0)  
  
    useEffect(() => {
    
      
      console.log('组件已更新')  
      countRef.value++  
    }, [countRef.value])  
  
    return countRef.value  
  },  
}

在这个例子中，我们的副作用操作会根据countRef.value的变化而执行。如果countRef.value发生变化，我们的操作就会再次执行。是不是很神奇？

当然，useEffect还可以做更多的事情，比如订阅事件、修改状态等等。你可以根据自己的需要来使用它。不过要注意哦，如果你想要使用副作用操作，一定要确保它是一个纯函数，否则它可能会破坏Vue的虚拟DOM优化机制，导致性能下降。所以各位新手们在使用它们的时候一定要小心哦！

useRef和useEffect是Vue3 Composition API中两个非常有用的钩子函数，可以帮助你更好地管理组件的状态和副作用操作。如果你想更深入地了解它们，可以查看官方文档，里面有很多有用的例子和技巧。

下面是一个简单的示例代码，演示了如何使用Vue3的Composition API中的useRef和useEffect：

<template>  
  <div>  
    <p>Count: {
   
   { count }}</p>  
    <button @click="increment">Increment</button>  
    <button @click="decrement">Decrement</button>  
  </div>  
</template>  
  
<script>  
import {
      
       useRef, useEffect } from 'vue'  
  
export default {
      
        
  setup() {
      
        
    const countRef = useRef(0)  
  
    useEffect(() => {
      
        
      console.log('组件已渲染')  
      countRef.value++  
    }, [])  
  
    function increment() {
      
        
      countRef.value++  
    }  
  
    function decrement() {
      
        
      countRef.value--  
    }  
  
    return {
      
        
      count: countRef.value,  
      increment,  
      decrement,  
    }  
  },  
}  
</script>

这个组件包含一个计数器的状态，以及增加和减少计数的按钮。我们使用了useRef来创建一个名为countRef的可变值，它用于存储计数器的状态。然后我们使用了useEffect来在组件初次渲染后将countRef的值加1。最后，我们将countRef的值作为count的属性返回出去，这样我们就可以在模板中使用它了。

在Vue3中，Composition API是一个非常强大的工具，它可以帮助你更好地组织和管理复杂的组件。如果你想了解更多关于Composition API的内容，可以查看我的其他文章哦！

Vue3的Composition API 中如何使用useRef和useEffect

猜你喜欢