vue3 响应式 API 之 ref

在Vue 3中，ref是一个用来创建响应式的引用对象的API。响应式引用对象可以用来保存一个独立的响应式值。

下面是一个简单的例子，展示如何在Vue 3中使用ref:




<template>
  <div>
    <input v-model="message" />
    <p>Message: {{ message }}</p>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const message = ref('');
    return { message };
  }
};
</script>

在这个例子中，我们首先从vue包中导入了ref函数。然后在setup函数中，我们使用ref创建了一个响应式的message变量，并且通过v-model绑定到了模板中的input元素上。当用户在输入框中输入内容时，message会自动更新，并且在<p>标签中展示出来。

vue3 响应式 API 之 ref

评论已关闭

推荐阅读