分享5个关于 Vue 的小知识，希望对你有所帮助（四）

大家好，今天我继续分享5个关于 Vue 的小知识，希望对你有所帮助。

往期文章

分享5个关于 Vue 的小知识，希望对你有所帮助（一）

分享5个关于 Vue 的小知识，希望对你有所帮助（二）

分享5个关于 Vue 的小知识，希望对你有所帮助（三）

1、如何在组合API中使用触发事件（Emmit Events）

发出事件可以使子组件向父组件传播事件。考虑这样一个场景，我们有一个弹出组件，并且我们打算从父组件切换其可见性。

当值例如 showPopup 设置为true时，弹出窗口应该显示，相反地，当值设置为false时，弹出窗口应该隐藏。这种基于事件的机制有助于组件之间的有效通信，促进它们行为的同步。

在这种情况下，有必要将事件向上传递给父组件。通过这样做，我们可以在父组件中处理此事件，通过将状态 showPopup 改为false来有效地关闭弹出窗口。

从子组件向父组件发出事件的这种方法是管理这些场景的有价值的策略。它使我们能够以结构化的方式处理事件，从而实现涉及组件之间的无缝交互。

定义发出（DefineEmits）

为了触发事件，我们使用Vue.js提供的 defineEmits 宏API来声明要触发的事件。如下面的示例所示， defineEmits 宏接受要触发的事件列表。需要注意的是，声明应该仅在子组件中进行，而不是在父组件中进行。

声明发出的事件

// emit one event "close"
const emit = defineEmits(['close'])
 
// emit multiple events "close" and "submit"
const emit = defineEmits(['close','submit'])

发出和监听事件

我们还可以在事件中传递值。例如，当我们发出某些事件时，可能希望传递一些值。我们可以在发出事件参数后，将值作为第二个参数传递进去。

在下面的示例中，我们在子组件中呈现一些项目，并使用其索引值向父组件发出 itemClicked 。

子组件

<script setup lang="ts">
import { ref } from 'vue';
const items = ref(['Java','Python','JavaScript','Rust','Go','C','OCalm'])
const emit = defineEmits(['itemClicked'])
function selectItem(index: number) {
  emit('itemClicked', index);
}
</script>
 
<template>
  <div>
    <ul>
      <li class="list" v-for="(item, index) in items" :key="index" @click="selectItem(index)">
        {{ item }}
      </li>
    </ul>
  </div>
</template>
 
<style scoped>
ul {
  display: flex;
  padding: 0;
  list-style: none;
  column-gap: 4px;
}
.list {
  padding: 10px 18px;
  border: 1px solid darkgray; 
  margin: 4px;
  border-radius: 5px;
  cursor: pointer;
}

父组件

在父组件中，我们导入 ChildComponent 并将其包含在模板中。然后，我们可以使用 v-on 指令（或 @ 的简写）来捕获 ChildComponent 发出的自定义事件。我们传入 handleEmittedEvent 方法来接收发出的值（在这种情况下是点击项的索引），并更新父组件中的 emittedValue 数据属性。

<template>
  <div>
  <p>Index of Clicked Item is {{emittedValue}}</p>
 
  <ChildComp @item-clicked="handleEmittedEvent" />
  </div>
</template>
 
<script setup lang="ts">
import { ref } from 'vue';
import ChildComp from './ChildComp.vue'
const emittedValue = ref<number | null >()
function handleEmittedEvent(index: number){
    emittedValue.value = index
}
</script>

处理自定义发射事件时，请记住使用 kebab-case 命名约定来命名您的指令。这有助于在您的 Vue 组件中保持一致性和可读性。

我们已经探索了在Vue.js中发出事件的过程以及如何使用自定义指令在父组件中处理它们。在各种场景中发出事件至关重要，因为它可以增强应用程序的灵活性和效率。

2、如何在VueJS中渲染SVG文件

可缩放矢量图形（SVG）基于XML标准，用于定义图像。与其他图像格式类似，SVG可以进行索引、搜索、压缩和脚本编写。与PNG等位图图像格式不同，SVG可以在任何大小下呈现而不失去质量。

SVG在现代应用中被广泛使用，主要是因为它们用户友好的特性以及无论在哪种屏幕尺寸上渲染，都能保持图像质量的能力。

渲染SVG文件

在Vue.js中，有三种主要的方法来渲染SVG文件。其中一种方法是将SVG文件封装在Vue.js模板组件中，然后将其作为组件导入和使用。

另一个选择是使用默认的 <img> 标签来渲染SVG文件。采用这种方法，您只需将SVG文件的路径作为 src 属性提供，文件将显示为图像。

SVG作为模板文件

在这个表单中，我们可以将SVG文件直接包含在 template 标签中，并按原样渲染。在下面的模板中，我们有一个以SVG图像表示的carbon:at @ 符号

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 3A12.92 12.92 0 0 0 3 16v1a13 13 0 0 0 13 13h7v-2h-7A11 11 0 0 1 5 17v-1A10.94 10.94 0 0 1 16 5a10.64 10.64 0 0 1 11 11c0 3.59-1.4 5-3.66 5c-1.58 0-2.34-1.29-2.34-3v-8h-2v1.94A3.84 3.84 0 0 0 15.5 10a5.48 5.48 0 0 0-5.5 5.44v2.12A5.48 5.48 0 0 0 15.5 23a4.28 4.28 0 0 0 4-2.46A4.35 4.35 0 0 0 23.41 23c3.07 0 5.59-2 5.59-7A12.72 12.72 0 0 0 16 3Zm3 14.56a3.5 3.5 0 0 1-7 0v-2.12a3.5 3.5 0 0 1 7 0Z"></path></svg>
</template>
<script lang="ts">
export default {
  name: 'CarbonAt'
}
</script>

在Vuejs中，将SVG作为文件模板，我们可以像使用任何Vue组件一样轻松导入和使用它。我们还可以像指定宽度和高度一样调整它的大小，就像处理普通的SVG一样。

<script setup>
import CarbonAt from './CarbonAt.vue';
</script>
<template>
    <CarbonAt />
</template>

SVG作为图像文件

另一种渲染SVG文件的方法是使用HTML的 <img> 标签来指定它们的位置，并使用 src 属性。这种方法将SVG文件渲染为图像文件，其中 src 属性指向特定SVG文件的位置。

由于 <img> 标签具有渲染各种图像格式的能力，包括APNG（动画便携式网络图形）、AVIF（AV1图像文件格式）、GIF（图形交换格式）、JPEG（联合图像专家组图像）、PNG（便携式网络图形）、SVG（可缩放矢量图形）和WebP（Web图片格式），它为整合不同类型的视觉内容提供了多功能的解决方案。

<template>
  <div>
    <img :src="CarbonAt" alt="image of carbon at">
  </div>
</template>
 
<script setup>
import CarbonAt from './CarbonAt.svg';
 
</script>

使用Object标签

在Vuejs中呈现SVG图像的另一种可能的方法是使用 object 标签。当您希望对SVG文件的呈现方式有更多控制时，可以使用 object 。

<template>
  <div>
    <object :data="svgUrl" type="image/svg+xml"></object>
  </div>
</template>
 
<script setup>
const svgUrl = 'https://api.iconify.design/carbon:branch.svg';
</script>

将SVG文件渲染到您的Vue.js应用程序中可以显著提升其效果，并带来许多优势。

3、如何监测文件上传表单内容更改

有时候，我们想要在Vue.js中观察文件输入以便捕捉文件选择改变事件。

我们可以通过监听change事件来观察Vue.js中文件输入的文件选择变化事件。为了做到这一点，我们使用 @change 指令来编写：

<template>
  <div id="app">
    <input type="file" @change="previewFiles" multiple />
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    previewFiles(event) {
      console.log(event.target.files);
    },
  },
};
</script>

另外，我们将 @change 的值设置为 previewFiles 方法。

然后当我们使用文件输入选择文件时，我们可以通过 event.target.files 属性获取所选文件的文件列表。

我们还可以为文件输入分配一个引用，并在方法中使用它来引用文件输入。

为了做到这一点，我们可以这样写：

<template>
  <div id="app">
    <input type="file" ref="myFiles" @change="previewFiles" multiple />
  </div>
</template><script>
export default {
  name: "App",
  methods: {
    previewFiles() {
      console.log(this.$refs.myFiles.files);
    },
  },
};
</script>

我们将 ref 属性设置为 myFiles ，然后使用 this.$refs.myFiles.files 获取选定的文件。

我们可以通过监听change事件来观察Vue.js中文件输入的文件选择变化事件。另外，我们将 @change 的值设置为 previewFiles 方法。

4、如何从数据对象中删除属性？

有时候，我们想要使用Vue.js从数据对象中删除一个属性。在本文中，我们将介绍如何使用Vue.js从数据对象中删除属性。

要从Vue.js的数据对象中删除属性，我们可以使用 this.$delete 方法。例如，我们可以写：

<template>
  <div id="app">
    {{ users }}
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      users: {
        foo: { firstName: "jane", lastName: "smith" },
        bar: { firstName: "john", lastName: "green" },
      },
    };
  },
  mounted() {
    this.$delete(this.users, "foo");
  },
};
</script>

使用 this.$delete 方法从 this.users 响应式属性中删除 foo 属性。

$delete 方法将触发Vue的响应性，以更新 this.users 对象以删除 foo 属性。

因此，从模板中，我们应该看到 users 现在是：

{ "bar": { "firstName": "john", "lastName": "green" } }

我们还可以使用 Vue.delete 方法来做同样的事情，写成：

<template>
  <div id="app">
    {{ users }}
  </div>
</template>
<script>
import Vue from "vue";
export default {
  name: "App",
  data() {
    return {
      users: {
        foo: { firstName: "jane", lastName: "smith" },
        bar: { firstName: "john", lastName: "green" },
      },
    };
  },
  mounted() {
    Vue.delete(this.users, "foo");
  },
};
</script>

我们只是用 Vue.delete 替换了 this.$delete 。

要从Vue.js的数据对象中删除属性，我们可以使用 this.$delete 方法。我们还可以使用 Vue.delete 方法来做同样的事情。

5、如何优雅的处理前端API错误？

应用程序接口（API）提供了一种与不同服务进行通信和交换信息的方式。然而，在通信过程中，存在潜在的故障点。例如，在查询用户数据的API时，API可能找不到记录，权限受限以查看某些信息，或者服务器完全故障。在通信层之间，可能会出现一些问题。

在我们的前端应用程序中，如果我们不处理大多数这些边缘情况并向用户报告有意义的信息，用户将无法知道出了什么问题，这可能会导致糟糕的用户体验。

一个完美实现的前端必须处理所有可能的边缘情况，以提供流畅的用户体验。在本文中，我们将探讨处理API错误的有效和高效方法，向用户提供有意义的反馈和解决问题的指导。

下面的实现已经处理了各种边缘情况并报告了有意义的信息。请看下面。我们的目标是处理大多数边缘情况并显示有关任何错误的信息提示。

<template>
  <h1>Get Bookmarks</h1>
  <button @click="fetchUserBookmarks">Bookmarks</button>
</template>
 
<script setup lang="ts">
import axios, { AxiosError } from "axios";
import { useToast } from 'vue-toastification';
const url = 'https://api.example.com';
const toast = useToast();
const fetchUserBookmarks = async () => {
  try {
    const response = await axios.get(url);
    // Handle the data as needed (e.g., update state, display bookmarks, etc.)
    const data = response.data;
    console.log(data);
  } catch (error: any) {
    handleError(error)
};
function handleError(error: unknown){
  if (error instanceof AxiosError && error.response) {
      // Check for specific status codes and show toast messages accordingly
      const statusCode = error.response.status;
      if (statusCode === 404) {
        toast.error('Not found: The requested resource was not found.');
      } else if (statusCode === 429) {
        toast.warning('Rate Limited: Too many requests, please try again later.');
      } else if (statusCode >= 500) {
        toast.error('Server Error: An internal server error occurred.');
      } else if (error.message === 'Network Error') {
        //implement retry here
        toast.error('No internet connection. Please check your network connection.');
      }
    } else if (error.request) {
      // The request was made, but no response was received
      toast.error('No response received from the server.');
    } else {
      // A different error occurred here
      toast.error('An unexpected error occurred:');
      console.log(error)
    }
  }
}
</script>

在处理前端API错误处理时，需要考虑一些最佳实践。

实施捕获块：将API请求包装在try-catch块中，以优雅地处理异常和错误。这样可以防止整个应用程序因未处理的API错误而崩溃。

解析错误响应：API通常以JSON格式返回详细的错误响应。解析这些响应以提取相关信息，如错误消息或错误代码，并以用户友好的方式呈现给用户。

使用HTTP状态码：注意API返回的HTTP状态码。不同的状态码表示不同类型的错误（例如，404表示未找到，500表示服务器错误）。在前端代码中适当地处理每个状态码。

显示用户友好的消息：向用户显示清晰简洁的错误消息，描述出了什么问题，并提供解决问题的指导。避免向最终用户显示原始的技术细节，因为这可能会令人困惑，甚至存在安全风险。

记录错误：在客户端记录API错误，以收集有价值的数据进行调试和故障排除。然而，在生产环境中要小心不要记录敏感信息。

重试机制：为瞬态错误（例如网络超时）实现一个重试机制，以便API有机会从临时问题中恢复。但是，避免过多的重试，以防止过载API并触发速率限制机制。

超时：设置合理的API请求超时时间，以防止前端无限期地等待响应。如果请求超时，考虑提供用户友好的消息。

处理网络错误：除了处理特定于API的错误之外，还要处理网络错误，例如连接失败或CORS（跨域资源共享）问题。显示适当的消息或引导用户检查他们的互联网连接。

提供联系信息：在出现关键错误或问题的情况下，考虑提供联系信息或支持链接，以便用户报告问题或寻求帮助。

本地化：如果您的应用程序已国际化，请确保错误消息也进行本地化，以满足不同地区的用户需求。

自动化测试：编写自动化测试来模拟API错误，并确保错误处理机制按预期工作。

安全注意事项：在错误信息中小心不要暴露敏感信息，因为攻击者可能利用这些数据来了解系统的漏洞。

通过遵循这些API错误处理最佳实践，您可以构建一个前端应用程序，有效地处理错误，保持平稳的用户体验，并在计划外发生问题时向用户提供有用的反馈。

结束

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。