setup参考:vue3-setup-基本使用_vue3 setup mounted-CSDN博客
Vue3中的ref
是一个函数,用于在setup
函数中创建一个响应式的变量。ref
函数接受一个初始值,返回一个响应式的对象。在setup
函数中可以通过ref
函数创建响应式变量,并将其作为返回值暴露给组件。
以下是一个使用ref
的示例:
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
return {
count,
increment
};
}
};
在上述示例中,count
是一个响应式变量,使用ref
函数创建,并通过.value
访问其值。increment
是一个方法,用于对count
的值进行增加。最后,在setup
函数中将count
和increment
作为返回值暴露给组件。
以下的说法则是错误的:
需要注意的是,Vue3的响应式系统使用了Proxy代理,所以在访问和修改响应式变量时,不再需要使用.value
。上述示例中的代码也可以直接写为:
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const increment = () => {
count++;
};
return {
count,
increment
};
}
};