vue3入门教程:ref函数

基本用法

  1. 引入 ref

    首先,你需要从 vue 包中引入 ref 函数:

    javascript 复制代码
    import { ref } from 'vue';
  2. 创建一个响应式变量

    使用 ref 函数来创建一个响应式变量:

    javascript 复制代码
    const count = ref(0);

    这里,count 是一个响应式引用对象,其 .value 属性初始值为 0

  3. 在模板中使用

    在 Vue 模板中,你可以直接访问响应式引用对象的值,而不需要使用 .value

    html 复制代码
    <template>
      <div>{{ count }}</div>
    </template>
  4. 在 JavaScript 中使用

    在 JavaScript 代码中,你需要通过 .value 来访问或修改响应式变量的值:

    javascript 复制代码
    count.value = 1;
    console.log(count.value);  // 输出: 1

在组合式 API 中使用

ref 通常与 Vue 的组合式 API 一起使用,特别是在 setup 函数中:

javascript 复制代码
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment
    };
  }
};

在模板中:

html 复制代码
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

ref 与原始类型

ref 可以用于基本数据类型(如数字、字符串、布尔值)以及对象和数组。对于对象和数组,ref 会使其变得"响应式",即对象的属性或数组的元素发生变化时,Vue 也能检测到并更新视图。

refreactive

refreactive 都是 Vue 3 中的响应式 API,但它们有不同的使用场景:

  • ref 用于基本数据类型和保存单一对象的引用。
  • reactive 用于创建响应式的对象或数组。

简单来说,如果你有一个基本数据类型或者想要一个明确的引用,使用 ref;如果你有一个对象或数组,并且想要使其内部属性和元素也响应式,使用 reactive

toReftoRefs

有时候你可能需要将一个响应式对象中的某个属性转换为 ref,这时候可以使用 toReftoRefs

javascript 复制代码
import { reactive, toRef, toRefs } from 'vue';

const state = reactive({
  count: 0,
  name: 'Vue'
});

const countRef = toRef(state, 'count');
const { name } = toRefs(state);

总结

ref() 是 Vue 3 中非常强大的一个工具,它使得创建和管理响应式数据变得更加简单和直观。通过合理使用 ref,你可以更好地组织你的代码,使其更加模块化和可维护。希望这篇深入教程能帮助你更好地理解和使用 ref()

相关推荐
腾讯TNTWeb前端团队4 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰8 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪8 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪8 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom9 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom9 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom9 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom10 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom10 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试