关于 Vue3 响应式 API 以及 reactive 和 ref 的用法

文章目录

  • 前言
  • 关于响应式
  • reactive 的用法
  • ref 的用法
  • 最后


前言

这篇文章记录一下 Vue3 响应式的内容,其中还包括了 reactiveref 的用法。响应式是一种允许以声明式的方式去适应变化的编程范例,接下来我们一起看看。


关于响应式

Vue 框架的特点之一就是响应式。Vue 2.x 是基于 Object.defineProperty() 方法实现响应式。但是 Object.defineProperty() 方法有一定的局限性,例如 Object.defineProperty() 无法监听对象属性的新增。为了克服解决这种缺陷,Vue3.x 版本引入 Proxy 对象来实现响应式。
关于 Vue3 响应式 API 以及 reactive 和 ref 的用法_第1张图片
Proxy 不仅可以监听到属性的变化和删除,同时还支持代理复杂的数据结构,例如 MapSetSymbol 等等。但是 Proxy 也是缺点,就是不兼容 IE 11(实际开发中如果要求程序员兼容 IE ,他可能反手就红温了hhh)。言归正传,如果要考虑兼容 IE 11 的问题,可以使用 Vue 2.x 版本来开发。


reactive 的用法

Vuereactive() 方法通过接收一个对象,返回对象的响应式副本,我们可以看看下面这段代码。

<template>
  <p>
    响应式Count: {{ reactiveCount.count }}
    <button @click="reactiveCount.count++">++button>
  p>
template>

<script setup lang="ts">
import { reactive } from "vue";
interface CountObject {
  count: number;
}

const reactiveCount = reactive<CountObject>({ count: 0 });
script>

这里通过 reactive() 方法将 { count: 0 }对象封装成一个响应式对象,并且可以通过点击页面中的按钮来动态实现数据更新,运行效果如下图 (项目刚创建的,路有什么的没配置,忽略无关内容)
关于 Vue3 响应式 API 以及 reactive 和 ref 的用法_第2张图片
reactive() 方法封装对象成为响应式并不仅仅是一层,而是深层转换。如果想要在 script 模板中修改对象某个属性的值,直接访问进行修改即可。代码如下。

<template>
  <p>学生: {{ student.name }}p>
  <p>成绩: {{ student.test_socre.name }} | {{ student.test_socre.score }}分p>
  <button @click="rest">rest markbutton>
template>

<script setup lang="ts">
import { reactive } from "vue";
interface Student {
  name: string;
  test_socre: {
    name: string;
    score: number;
  };
}

const student = reactive<Student>({
  name: "ghz",
  test_socre: {
    name: "C语言",
    score: 98,
  },
});

const rest = () => {
  student.test_socre.score = 0;
};
script>

关于 Vue3 响应式 API 以及 reactive 和 ref 的用法_第3张图片
点击按钮后,分数重置。
关于 Vue3 响应式 API 以及 reactive 和 ref 的用法_第4张图片
这里 reactive() 将一个比较复杂的对象转换成了响应式对象,通过点击按钮,调用 rest 方法,将 student 对象中的 test_score 下的 score 重置为 0 分。同时,在方法内部,可以直接访问对象的属性进行修改数值。


ref 的用法

Vue 3.x 中,ref() 负责将基本数据类型的数据封装成响应式数据。在所使用的 TypeScript 中,基本数据类型有:StringNumberBooleanBigintSymbolUndefinedNull

ref() 负责接受上述类型的数组返回一个响应式而且可变的 ref 对象,如果要获取其中的值,需要访问对象的 .value 属性来获取。我们可以看看下面这段代码。

<template>
  <div>div>
template>

<script setup lang="ts">
import { ref } from "vue";

const str = ref<string>("hello");
const num = ref<number>(123);
const bool = ref<boolean>(true);
const bigint = ref<bigint>(9007199254740991n);
const symbolObject = Symbol("foo");
const symb = ref<symbol>(symbolObject);
const und = ref<undefined>(undefined);
const nul = ref<null>(null);

console.log(str.value); // hello
console.log(num.value); // 123
console.log(bool.value); // true
console.log(bigint.value); // 9007199254740991nX
console.log(typeof symb.value); // symbol
console.log(symb.value); // Symbol(foo)
console.log(und.value); // undefined
console.log(nul.value); // null
script>

关于 Vue3 响应式 API 以及 reactive 和 ref 的用法_第5张图片
从上面的这段代码中可以看到,如果想要在 script 模板中读取或者修改 ref 对象的值,需要从 .value 属性中获得。在模板中可以直接通过插值表达式读取出来。这里需要注意的是 ref 是响应式对象,所以一旦 ref.value 属性值被修改,那么对应的页面模板也会重新渲染。

reactive() 负责封装对象变量,ref() 负责封装基础数据类型变量,这两个方法是 Vue3 最常见也最重要的命令之一。


最后

以上就是这篇文章的全部内容了,通过这篇文章,我们可以简单了解学习 Vue3 响应式的内容,通过实际案例我们也学习了 reactiveref 的用法。
在这里插入图片描述

你可能感兴趣的:(前端,#,Vue,前端,Vue3,ref,reactive,响应式,vue.js,typescript)