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()

相关推荐
涵信24 分钟前
第九节:性能优化高频题-首屏加载优化策略
前端·vue.js·性能优化
前端小巷子36 分钟前
CSS单位完全指南
前端·css
SunTecTec1 小时前
Flink Docker Application Mode 命令解析 - 修改命令以启用 Web UI
大数据·前端·docker·flink
涵信1 小时前
第十一节:性能优化高频题-响应式数据深度监听问题
javascript·vue.js·性能优化
拉不动的猪2 小时前
前端常见数组分析
前端·javascript·面试
小吕学编程3 小时前
ES练习册
java·前端·elasticsearch
Asthenia04123 小时前
Netty编解码器详解与实战
前端
袁煦丞3 小时前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作
Mr.app3 小时前
vue mixin混入与hook
vue.js
一个专注写代码的程序媛4 小时前
vue组件间通信
前端·javascript·vue.js