VUE3-其他API

shallowRef&shallowReactive

浅层次的ref，对于修饰对象的ref来说，使用shallowRef仅映射第一层，shallowRef的效率更高

shallowReactive同理，对象中第一层中的内容是响应式的，但深层次的就不被修饰为响应式的

如果不想关注深层次的响应式内容，就可以使用这两个来修饰响应式数据，这使得属性的访问更快，可以提升性能

readonly和shallowReadonly

readonly和const是有区别的，const是针对于引用不可被重新赋值，但其属性可以改变，而readonly修饰的对象可以重新赋值，但属性不可改变

shallowReadonly 是一个浅层次的只读，第一层被保护无法修改，而深层次可以修改

toRaw&markRaw

toRaw可以获取一个响应式对象的原始对象，在需要将响应式对象给非Vue的库或外部系统时，使用toRaw可以确保他们收到的是非响应式对象

markRaw可以标记一个对象，使其永远不会成为响应式对象

例如使用mockjs时，为了防止错误的把mockjs变成响应式对象，可以使用markRaw去标记mockjs

customRef

// 使用Vue提供的customRef定义响应式数据
let initValue = '你好';

// track(跟踪)、trigger(触发)
let msg = customRef((track, trigger) => {
  return {
    // get何时调用？ — msg被读取时
    get() {
      track(); // 告诉Vue数据msg很重要，你要对msg进行持续关注，一旦msg变化就去更新
      return initValue;
    },
    // set何时调用？ — msg被修改时
    set(value) {
      console.log('set', value);
      initValue = value;
      trigger(); // 通知Vue一下数据msg变化了
    }
  };
});

这段代码使用了 Vue 的 customRef 来创建一个自定义的响应式引用。具体解释如下：

初始化值：initValue 是初始值。
customRef：通过 customRef 创建一个自定义的响应式引用。
get 方法：当 msg 被读取时，会调用 get 方法，并返回 initValue。
set 方法：当 msg 被修改时，会调用 set 方法，并更新 initValue，同时触发依赖项更新。

一般会将自定义ref封装成为一个hooks

teleport

teleport是一种能够让我们的组件html结构移动到指定位置的技术，多用于子组件中想将某一个结构移至父组件（弹窗）

Suspense

如果子组件中包含着异步请求，我们可以通过Suspense元素+命名插槽的方式来处理

<template>
	<Suspense>
    	<template v-slot:default>
            <Child/>
        </template>
        <template v-slot:fallback>
            <h2>加载中…………</h2>
        </template>
    </Suspense>
</template>

<script setup>
import {Suspense} from 'vue'
import Child from 'Child.vue'
</script>

在这里，Child组件中有异步发送Axios请求的操作，利用Suspense配合命名插槽

当没有请求到内容时，插槽中显示h2标签的加载中，当请求到内容时，再将子组件内容渲染到插槽中

在Vue2中，存在一个全局API，在Vue3中已经全部转移应用对象

app.component

注册全局组件，再main.js中，调用app.component可以将组件注册为全局组件

app.config

app.config.globalProperties可以添加全局属性，不推荐这么使用，因为无法追踪代码

app.directive

app.directive添加全局指令

app.mount

挂载应用

app.unmount

卸载应用

app.use

安装插件

#VUE

AI 上一篇

VUE3-组件通信下一篇