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、订阅事件等等。你可以把它想象成一个魔法笔记本，每次你写下一个愿望，它都能帮你实现。我们来看看咋们咋样使用它吧！<