当前位置： 首页 > article >正文

学习Vue3的第五天

article 2024/11/18 7:28:20

目录

API对比

shallowRef 与 shallowReactive

对比总结

使用场景

总结

readonly 与 shallowReadonly

对比总结

使用场景

总结

toRaw 与 markRaw

对比总结

使用场景

总结

customRef

应用场景

总结

示例：异步数据获取

Vue3新组件

Teleport

Suspense

全局API转移到应用对象

其他

API对比

shallowRef 与 shallowReactive

shallowRef

作用：创建一个响应式数据，但只对顶层属性进行响应式处理。

用法：

import { shallowRef } from 'vue';

let myVar = shallowRef(initialValue);

特点：

  • 只跟踪引用值的变化，不关心值内部的属性变化。
  • 适用于只需要对顶层属性进行响应式处理的场景，特别是当嵌套对象较大或不需要响应式时。

shallowReactive

作用：创建一个浅层响应式对象，只会使对象的最顶层属性变成响应式的，对象内部的嵌套属性则不会变成响应式的。

用法：

import { shallowReactive } from 'vue';

const myObj = shallowReactive({ ... });

特点：

  • 对象的顶层属性是响应式的，但嵌套对象的属性不是。
  • 适用于只需要对顶层属性进行响应式处理的场景，特别是当嵌套对象较大或不需要响应式时。

总结

通过使用 shallowRef() 和 shallowReactive()，可以绕开深度响应。浅层式 API 创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理，避免了对每一个内部属性做响应式所带来的性能成本。这使得属性的访问变得更快，可提升性能。

对比总结

特性shallowRefshallowReactive
创建方式shallowRef(initialValue)shallowReactive(initialValue)
响应式处理只对顶层属性进行响应式处理只对顶层属性进行响应式处理
嵌套对象的响应式嵌套对象不是响应式的嵌套对象不是响应式的
访问方式通过 .value 访问直接访问
适用场景需要浅层响应式的简单对象需要浅层响应式的简单对象

使用场景

  • shallowRef：适用于只需要对顶层属性进行响应式处理的场景，特别是当嵌套对象较大或不需要响应式时。

  • shallowReactive：适用于只需要对顶层属性进行响应式处理的场景，特别是当嵌套对象较大或不需要响应式时。

总结

  • shallowRef 和 shallowReactive 都是浅层响应式工具，只对对象的顶层属性进行响应式处理。
  • 它们都不会递归地对嵌套对象进行响应式处理。
  • shallowRef 需要通过 .value 访问属性，而 shallowReactive 可以直接访问属性。

readonly 与 shallowReadonly

readonly

作用：用于创建一个对象的深只读副本。

用法：

import { readonly, reactive } from 'vue';

const original = reactive({ ... });
const readOnlyCopy = readonly(original);

特点：

  • 对象的所有嵌套属性都将变为只读。
  • 任何尝试修改这个对象的操作都会被阻止（在开发模式下，还会在控制台中发出警告）。

应用场景：

  • 创建不可变的状态快照。
  • 保护全局状态或配置不被修改。

shallowReadonly

作用：与 readonly 类似，但只作用于对象的顶层属性。

用法：

import { shallowReadonly, reactive } from 'vue';

const original = reactive({ ... });
const shallowReadOnlyCopy = shallowReadonly(original);

特点：

  • 只将对象的顶层属性设置为只读，对象内部的嵌套属性仍然是可变的。

  • 适用于只需保护对象顶层属性的场景。

对比总结

特性readonlyshallowReadonly
创建方式readonly(original)shallowReadonly(original)
只读处理递归地将所有属性（包括嵌套对象）变成只读只将顶层属性变成只读
嵌套对象的只读性嵌套对象的属性也是只读的嵌套对象的属性不是只读的
适用场景需要完全只读的对象只需要顶层属性只读的对象

使用场景

  • readonly：适用于需要完全只读的对象，确保对象及其所有嵌套属性都无法修改。
  • shallowReadonly：适用于只需要顶层属性只读的对象，允许修改嵌套对象的属性。

总结

  • readonly 和 shallowReadonly 都是用于创建只读对象的工具。
  • readonly 会递归地将对象的所有属性（包括嵌套对象）都变成只读的。
  • shallowReadonly 只会使对象的最顶层属性变成只读的，嵌套对象的属性不是只读的。

toRaw 与 markRaw

toRaw

作用：用于获取一个响应式对象的原始对象。toRaw 返回的对象不再是响应式的，不会触发视图更新。

官网描述：这是一个可以用于临时读取而不引起代理访问/跟踪开销，或是写入而不触发更改的特殊方法。不建议保存对原始对象的持久引用，请谨慎使用。

何时使用？ —— 在需要将响应式对象传递给非 Vue 的库或外部系统时，使用 toRaw 可以确保它们收到的是普通对象。

import { reactive, toRaw, markRaw, isReactive } from "vue";

/* toRaw */
// 响应式对象
let person = reactive({ name: 'tony', age: 18 });
// 原始对象
let rawPerson = toRaw(person);

console.log(isReactive(person)); // true
console.log(isReactive(rawPerson)); // false

markRaw

作用：标记一个对象，使其永远不会变成响应式的。

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

/* markRaw */
let citys = markRaw([
  { id: 'asdda01', name: '北京' },
  { id: 'asdda02', name: '上海' },
  { id: 'asdda03', name: '天津' },
  { id: 'asdda04', name: '重庆' }
]);

// 根据原始对象 citys 去创建响应式对象 citys2 —— 创建失败，因为 citys 被 markRaw 标记了
let citys2 = reactive(citys);

console.log(isReactive(citys)); // false
console.log(isReactive(citys2)); // false

对比总结

特性toRawmarkRaw
作用获取响应式对象的原始对象标记对象，使其永远不会变成响应式对象
返回值非响应式的原始对象标记后的对象
响应式处理返回的对象不会触发响应式更新标记的对象永远不会变成响应式对象
适用场景需要访问原始对象的场景需要确保对象永远不会变成响应式对象的场景

使用场景

  • toRaw：适用于需要访问原始对象的场景，避免不必要的响应式处理。
  • markRaw：适用于需要确保对象永远不会变成响应式对象的场景，例如某些第三方库的对象或不需要响应式的配置对象。

总结

  • toRaw 用于获取响应式对象的原始对象，返回一个非响应式的原始对象。
  • markRaw 用于标记一个对象，使其永远不会被转换为响应式对象。

customRef

在 Vue 3 中，customRef 是一个用于创建自定义 ref 的工具。它允许我们完全控制 ref 的依赖追踪和更新触发机制。通过 customRef，可以实现更复杂的响应式逻辑，例如防抖、节流、异步数据获取等。

customRef 的基本用法

customRef 接受一个工厂函数，该函数返回一个包含 get 和 set 方法的对象。get 方法用于获取值，set 方法用于设置值。

import { customRef } from 'vue';

function useDebouncedRef(value, delay = 200) {
  let timeout;
  return customRef((track, trigger) => {
    return {
      get() {
        track(); // 追踪依赖
        return value;
      },
      set(newValue) {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
          value = newValue;
          trigger(); // 触发更新
        }, delay);
      }
    };
  });
}

const debouncedRef = useDebouncedRef('initial value', 500);

debouncedRef.value = 'new value'; // 500ms 后才会更新

解释

  • customRef 接受一个工厂函数，该函数返回一个包含 get 和 set 方法的对象。
  • get 方法用于获取值，并调用 track 方法来追踪依赖。
  • set 方法用于设置值，并调用 trigger 方法来触发更新。
  • 在上面的示例中，useDebouncedRef 创建了一个防抖的 ref，只有在指定延迟后才会更新值。

应用场景

  • 防抖和节流：通过 customRef 可以实现防抖和节流的功能，避免频繁触发更新。
  • 异步数据获取：可以在 set 方法中进行异步数据获取，并在数据获取完成后更新值。
  • 自定义依赖追踪：可以根据需要自定义依赖追踪逻辑，实现更复杂的响应式行为。

总结

customRef 是一个强大的工具，允许我们完全控制 ref 的依赖追踪和更新触发机制。通过 customRef，我们可以实现更复杂的响应式逻辑，例如防抖、节流、异步数据获取等。

示例：异步数据获取

import { customRef } from 'vue';

function useAsyncRef(initialValue, asyncFunc) {
  let value = initialValue;
  let loading = false;

  return customRef((track, trigger) => {
    return {
      get() {
        track(); // 追踪依赖
        return value;
      },
      set(newValue) {
        if (typeof newValue === 'function') {
          loading = true;
          asyncFunc(newValue).then(result => {
            value = result;
            loading = false;
            trigger(); // 触发更新
          });
        } else {
          value = newValue;
          trigger(); // 触发更新
        }
      }
    };
  });
}

const asyncRef = useAsyncRef('initial value', async (func) => {
  return await func();
});

asyncRef.value = async () => {
  return 'new value from async function';
};

解释

  • useAsyncRef 创建了一个可以处理异步数据获取的 ref。
  • 当 set 方法接收到一个函数时，会调用 asyncFunc 进行异步数据获取，并在数据获取完成后更新值。
  • 在 get 方法中，调用 track 方法来追踪依赖。
  • 在 set 方法中，调用 trigger 方法来触发更新。

Vue3新组件

Teleport

Teleport 是 Vue 3 中引入的一个内置组件，用于将组件的模板部分渲染到 DOM 中的指定位置，而不是其父组件的 DOM 结构中。这在处理模态框、弹出层、全局提示等场景时非常有用。

基本用法

Teleport 组件有两个主要属性：

  • to：指定目标元素的选择器或 DOM 元素，表示要将内容渲染到哪个位置。
  • disabled：布尔值，表示是否禁用 Teleport 功能，如果为 true，内容将渲染在当前组件的位置。
<template>
  <div>
    <button @click="showModal = true">打开模态框</button>

    <Teleport to="body">
      <div v-if="showModal" class="modal">
        <p>这是一个模态框</p>
        <button @click="showModal = false">关闭</button>
      </div>
    </Teleport>
  </div>
</template>

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

const showModal = ref(false);
</script>

<style scoped>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>

应用场景

  • 模态框：将模态框的内容渲染到 body 元素中，避免被父组件的样式或布局影响。
  • 全局提示：将全局提示信息渲染到页面的固定位置，如页面顶部或底部。
  • 弹出层：将弹出层的内容渲染到页面的指定位置，避免被父组件的样式或布局影响。

动态控制 Teleport

我们可以通过 disabled 属性动态控制 Teleport 的行为。例如，根据某些条件决定是否将内容渲染到指定位置。

<template>
  <div>
    <button @click="showModal = true">打开模态框</button>

    <Teleport :to="teleportTarget" :disabled="isDisabled">
      <div v-if="showModal" class="modal">
        <p>这是一个模态框</p>
        <button @click="showModal = false">关闭</button>
      </div>
    </Teleport>
  </div>
</template>

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

const showModal = ref(false);
const teleportTarget = ref('body');
const isDisabled = ref(false);

// 动态控制 Teleport 的行为
const toggleTeleport = () => {
  isDisabled.value = !isDisabled.value;
};
</script>

<style scoped>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>

总结

Teleport 是一个非常有用的组件，允许我们将组件的内容渲染到 DOM 中的指定位置，而不是其父组件的 DOM 结构中。这在处理模态框、弹出层、全局提示等场景时非常有用。通过 to 和 disabled 属性，我们可以灵活控制 Teleport 的行为。

Suspense

Suspense 是 Vue 3 中引入的一个内置组件，用于在异步组件加载时渲染一些额外内容，从而提升用户体验。Suspense 允许我们在等待异步组件加载完成时显示一个占位符或加载状态，而不是直接显示空白或未加载的内容。

基本用法

Suspense 组件有两个插槽：

  • default：用于放置异步组件或异步操作的内容。
  • fallback：用于放置在异步组件加载完成前显示的占位符内容。
<template>
  <div>
    <Suspense>
      <template #default>
        <AsyncComponent />
      </template>
      <template #fallback>
        <div>Loading...</div>
      </template>
    </Suspense>
  </div>
</template>

<script setup>
import { defineAsyncComponent } from 'vue';

// 异步引入组件
const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue')
);
</script>

解释

  • Suspense 包裹了异步组件 AsyncComponent。
  • default 插槽放置异步组件的内容。
  • fallback 插槽放置在异步组件加载完成前显示的占位符内容。
  • defineAsyncComponent 用于异步引入组件。

应用场景

  • 异步组件加载：在异步组件加载完成前显示加载状态或占位符内容。
  • 数据获取：在数据获取完成前显示加载状态或占位符内容。

动态控制 Suspense

我们可以通过 Suspense 的 default 和 fallback 插槽动态控制异步组件的加载状态。例如，在数据获取完成前显示加载状态，数据获取完成后显示实际内容。

<template>
  <div>
    <Suspense>
      <template #default>
        <div v-if="data">
          <h1>{{ data.title }}</h1>
          <p>{{ data.description }}</p>
        </div>
      </template>
      <template #fallback>
        <div>Loading data...</div>
      </template>
    </Suspense>
  </div>
</template>

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

const data = ref(null);

// 模拟异步数据获取
const fetchData = async () => {
  // 模拟异步请求
  await new Promise(resolve => setTimeout(resolve, 2000));
  data.value = {
    title: 'Async Data',
    description: 'This is some async data.'
  };
};

fetchData();
</script>

解释

  • Suspense 包裹了异步数据获取的内容。
  • default 插槽放置数据获取完成后的内容。
  • fallback 插槽放置在数据获取完成前显示的加载状态。
  • fetchData 方法模拟异步数据获取，并在数据获取完成后更新 data 的值。

总结

Suspense 是一个非常有用的组件，允许我们在异步组件或异步操作加载完成前显示占位符内容，从而提升用户体验。通过 default 和 fallback 插槽，我们可以灵活控制异步加载状态的显示。

全局API转移到应用对象

在 Vue 3 中，全局 API 被转移到了应用对象（app）上。这意味着我们可以通过应用实例来访问和配置 Vue 的各种功能，而不是直接调用全局 API。这种设计使得每个应用实例更加独立，避免了全局状态的污染。

app.component：用于注册或获取全局组件。

import { createApp } from 'vue';
import App from './App.vue';
import MyComponent from './components/MyComponent.vue';

const app = createApp(App);

// 注册全局组件
app.component('MyComponent', MyComponent);

// 获取全局组件
const MyComponentInstance = app.component('MyComponent');

app.mount('#app');

app.config：用于配置应用的全局配置，如错误处理器、警告处理器等。

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 配置全局错误处理器
app.config.errorHandler = (err, vm, info) => {
  console.error('Global error handler:', err, vm, info);
};

// 配置全局警告处理器
app.config.warnHandler = (msg, vm, trace) => {
  console.warn('Global warning handler:', msg, vm, trace);
};

app.mount('#app');

app.directive：用于注册或获取全局自定义指令。

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 注册全局自定义指令
app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

// 获取全局自定义指令
const focusDirective = app.directive('focus');

app.mount('#app');

app.mount：用于将应用实例挂载到指定的 DOM 元素上。

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 挂载应用实例到 #app 元素
app.mount('#app');

app.unmount：用于卸载应用实例。

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 挂载应用实例
const vm = app.mount('#app');

// 卸载应用实例
app.unmount();

app.use：用于安装插件。

import { createApp } from 'vue';
import App from './App.vue';
import MyPlugin from './plugins/MyPlugin';

const app = createApp(App);

// 安装插件
app.use(MyPlugin);

app.mount('#app');

其他

  • 过渡类名 `v-enter` 修改为 `v-enter-from`、过渡类名 `v-leave` 修改为 `v-leave-from`。
  • `keyCode` 作为 `v-on` 修饰符的支持。
  • `v-model` 指令在组件上的使用已经被重新设计，替换掉了 `v-bind.sync。`
  • `v-if` 和 `v-for` 在同一个元素身上使用时的优先级发生了变化。
  • 移除了`$on`、`$off` 和 `$once` 实例方法。
  • 移除了过滤器 `filter`。
  • 移除了`$children` 实例 `propert`。
  •   ......

http://www.kler.cn/a/301706.html

相关文章：

  • 【工具插件类教学】在 Unity 中使用 iTextSharp 实现 PDF 文件生成与导出
  • GitLab 如何降级？
  • 【C++】构造函数
  • 重置docker版本的octoprint管理员账号密码
  • IDC 报告：百度智能云 VectorDB 优势数量 TOP 1
  • 【SpringBoot】公共字段自动填充
  • MAC 地址简化概念（有线 MAC 地址、无线 MAC 地址、MAC 地址的随机化）
  • Android Radio2.0——有效电台扫描（八）
  • 【网络】高级IO——五种IO模式
  • 概念——二连杆与三连杆解算
  • VS2019界面介绍
  • vue3+ant design vue动态实现级联菜单~
  • Gradle和Maven
  • 第四部分：1---文件内核对象，文件描述符，输出重定向
  • Unity基本操作
  • 前端封装组件可视化库
  • 第15-05章：获取运行时类的完整结构
  • 【AcWing】871. 约数之和
  • Spring Security 快速开始
  • centos7安装MySQL5.7.44
  • Docker Swarm管理（Docker技术集群与应用）
  • k8s的配置
  • 【网络安全】漏洞挖掘之CVE-2019-9670+检测工具
  • 如何使用Flask渲染模板
  • 比 GPT-4 便宜 187 倍的Mistral 7B （非广告）
  • 明基相机sd卡格式化还能恢复数据吗？可以这样操作