我们知道,在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>
需要注意的是:
- 在
setup
中定义的变量或方法,都必须通过return {xxx,xxx}
暴露出去,外界才能使用 -
ref
函数仅能监听基本类型的变化,不能监听复杂类型的变化(比如对象、数组)
以上就是ref
函数的基本使用!