详细分析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的值。

详细分析Vue3中的ref

评论已关闭

推荐阅读