记录 Vue3 中一些常用的 Api

前言

自己开发 Vue3 也有好几个项目了，闲来之下整理一下常用的 Api 方法，本文会介绍 Vue3 常用的 Api 使用，希望能帮助到大家，同时算是自己的一种总结吧，如有问题，请及时联系我，十分欢迎各位大佬的指正。

1、ref

作用

定义一个响应式的数据，一般来说定义一个基本数据类型会用 ref，(Undefined、Null、Boolean、Number、String)

基本数据类型

<template>
  <div>{{ count }}</div>
  <button @click="addCount">增加</button>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
// ref用于定义一个响应式的数据，返回的是一个RefImpl对象，对象中有一个value属性
// 如果需要对数据进行操作，需要使用该RefImpl对象的value属性
const count = ref(0);
// 打印
console.log(count)

const addCount = () => {
  count.value++;
  console.log(count.value) // 1
};
</script>

对象数据类型（不一般的情况）

<template>
  <div>{{ obj.count }}</div>
  <button @click="addCount">增加</button>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const obj = ref({
  count: 0
});
// 打印
console.log(obj)

const addCount = () => {
  obj.value.count++;
  console.log(obj.value.count) // 1
};
</script>

我们打印这两种数据会发现，通过ref响应的对象数据类型，_value变成了Proxy实例对象，这是因为vue3底层会把ref中的对象都变成Proxy实例对象，对于基本数据类型就是按照Object.defineProperty里面的get和set进行数据劫持然后进行响应式，但是如果是对象类型的话，是用到的Proxy，vue3 把这个函数封装在了reactive里，就是如果ref中是对象的话，会自动调用reactive。

注意： script 中操作数据需要使用xxx.value的形式，而模板中不需要添加.value

去掉 `.value`

即 vue3 提了一个 Ref Sugar 的 RFC，即 ref 语法糖，在 ref 前加上$，目前还处理实验阶段。

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [
    vue({
      refTransform: true, // 开启 ref 转换 , 开启之后就不需要 .value 了可以直接使用
    }),
  ],
});

// .vue 文件中
<script lang="ts" setup>
  let count = $ref(0); const addCount = () => {count++}
</script>;

2、reactive

作用

定义对象类型的响应式数据，接收一个普通对象然后返回该普通对象的响应式代理器对象(Proxy)，它会影响到所有嵌套的属性，也可以进行数组的响应式。一个响应式对象也将深层地解包任何 ref 属性，同时保持响应性。若要避免深层响应式转换，只想保留对这个对象顶层次访问的响应性，请使用 shallowReactive() 作替代。

<template>
  <h1>姓名：{{ detail.name }}</h1>
  <h1>年龄：{{ detail.age }}</h1>
  <button @click="editInfo">修改</button>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
// 深层次响应
const detail = reactive({
  name: '张三',
  age: '18',
});

const editInfo = () => {
  detail.name = '李四'
  detail.age = '20'
  // 会更新 detail
  console.log(detail.name) // 李四
  console.log(detail.age) // 20
}
</script>

前面说ref可以响应，每次需要.value就是，可能有人觉的好用吧，只要.value就可以了，他喵的，正常点，我可不想以后碰到你的代码 😭，因为一旦页面数据多起来，不得把.value点冒烟了。

注意： reactive 的弊端是不能解构，解构就会失去响应性，当然你也可以用 toRefs 来解决这个问题

3、computed

作用

接受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象

1
2
3

<script lang="ts" setup>
  import {computed} from 'vue';
</script>

后面会继续更新…

前言

1、ref

作用

去掉 .value

2、reactive

作用

3、computed

作用

去掉 `.value`