首页 前端知识 详细分析Vue3中的ref(附Demo)

详细分析Vue3中的ref(附Demo)

2024-08-18 22:08:31 前端知识 前端哥 898 293 我要收藏

目录

  • 前言
  • 1. 基本知识
  • 2. Demo

前言

由于新项目涉及Vue3,本着探究问题的本质研究所不会的疑问

1. 基本知识

ref 是 Vue 3 中用于创建响应式数据的函数

  • 接收一个初始值并返回一个包含了该值的响应式引用对象
  • 与 Vue 2.x 中的 data 属性不同,ref 返回的是一个对象,而不是一个直接的值

主要的用法如下:

import { ref } from 'vue';

// 创建一个 ref
const count = ref(0);

// 读取 ref 的值
console.log(count.value); // 输出:0

// 修改 ref 的值
count.value++;
console.log(count.value); // 输出:1

具体的作用如下:

  • 创建响应式数据:通过 ref 创建的数据是响应式的,当数据发生变化时,相关的视图会自动更新

  • 引用数据的访问和修改.value 属性可以访问和修改 ref 的值
    这种方式让数据的访问和修改更加直观和一致

  • 在模板中使用:可以直接在模板中使用 ref 创建的响应式数据,而不需要像 Vue 2.x 中一样通过 this 访问

  • 跟踪数据变化:Vue 3 中的 ref 通过 ES6 的 Proxy 实现,能够跟踪数据的读取和修改,从而实现数据的响应式更新

2. Demo

示例简易的Demo如下:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 创建一个 ref
    const count = ref(0);

    // 定义一个增加 count 的方法
    const increment = () => {
      count.value++;
    };

    // 返回模板中需要用到的数据和方法
    return {
      count,
      increment,
    };
  },
};
</script>

在实战中常用如下:

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16147.html
标签
评论
发布的文章

无涯教程-HTML5 - MathML

2024-08-25 23:08:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!