详细分析Vue3中的ref
在Vue 3中，ref是一个函数，用于创建一个响应式的引用对象（reactive reference），可以通过它来实现对单个数据的响应式跟踪。
ref的使用方法如下：
- 引入
ref函数。 - 在
setup函数内部调用ref并传入初始值。 - 返回
ref对象，在模板中可以直接访问和更新它的value属性。
下面是一个简单的例子：
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
function increment() {
count.value++;
}
return {
count,
increment
};
}
};
</script>在这个例子中，我们创建了一个名为count的响应式引用，初始值为0。在模板中显示count时，会自动解包它的value属性。increment函数增加count的值。
评论已关闭