我們知道，在vue3.0引入了composition API,setup函數(shù)是其核心函數(shù)

在setup函數(shù)中，可以使用ref函數(shù)，用于創(chuàng)建一個響應(yīng)式數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生改變時，Vue會自動更新UI
例如：使用ref函數(shù)定義一個變量count

import { ref } from 'vue';

function useChangeCount() {
    let count = ref(0);
    function change_count() {
        count.value += 1;
    }
    return { count, change_count }
}
export default useChangeCount;

然后在組件中引入該模塊：import useChangeCount from "./composition_tiny_js/count"
并且在組件的setup中使用，并通過return的形式將外界需要用到的變量和函數(shù)暴露出去

setup() {
  let { count, change_count } = useChangeCount();
  return { count, change_count };
}

這樣上面暴露的count變量,change_count方法就可以在外界使用了

<template>
    <div>
      <h1>{{ count }}</h1>
      <button @click="change_count">點我</button>
    </div>
</template>

需要注意的是：

1. 在setup中定義的變量或方法，都必須通過return {xxx,xxx}暴露出去，外界才能使用
2. ref函數(shù)僅能監(jiān)聽基本類型的變化，不能監(jiān)聽復(fù)雜類型的變化（比如對象、數(shù)組）

以上就是ref函數(shù)的基本使用！