vue3 ref函数

我们知道，在vue3.0引入了composition API,setup函数是其核心函数

在setup函数中，可以使用ref函数，用于创建一个响应式数据，当数据发生改变时，Vue会自动更新UI
例如：使用ref函数定义一个变量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的形式将外界需要用到的变量和函数暴露出去

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函数仅能监听基本类型的变化，不能监听复杂类型的变化（比如对象、数组）

以上就是ref函数的基本使用！