使用 Vue3.x 非 SFC 方式构建天气查询按钮组件 ☁️🌞

站长

2024年03月18日 12:48 · 阅读数 3

在 Vue3.x 中，虽然单文件组件（SFC）是最常见的开发方式，但在某些场景下可能需要以非 SFC 的方式来定义和使用组件。这种方式在轻量级项目或将 Vue 集成到现有项目中时尤其有用。本文将详细的叙述如何使用 Vue3.x 的非 SFC 方式封装一个组件，这个组件是一个按钮，点击后可以请求并显示最新的天气信息。

步骤 1：创建项目结构 📂

首先，确保项目结构简洁，便于管理。假设项目目录如下：

/weather-app
  /index.html
  /main.js
  /WeatherButton.js

步骤 2：定义天气按钮组件 🔘

在 WeatherButton.js 文件中，使用 Vue3.x 的 defineComponent 方法来定义一个组件。这个组件将包括一个按钮和用于显示天气信息的文本。

// WeatherButton.js
import { defineComponent, reactive } from 'vue';

export const WeatherButton = defineComponent({
  setup() {
    const state = reactive({
      weather: '点击查询天气'
    });

    const fetchWeather = async () => {
      // 伪代码：请求天气数据
      state.weather = `北京的天气：晴朗`;
    };

    return {
      state,
      fetchWeather
    };
  },
  template: `
    <div>
      <button @click="fetchWeather">查询天气</button>
      <p>{{ state.weather }}</p>
    </div>
  `
});

在这个组件中使用了 reactive 来定义响应式数据 state，其中包含了天气信息。fetchWeather 方法用于请求天气数据，并更新 state.weather。（直接在 template 字段中定义了组件的 HTML 结构，以及使用 Vue 的模板语法绑定数据和事件处理器。）

步骤 3：在主应用中使用组件 🌐

在 main.js 中，需要创建一个 Vue 应用实例，并使用定义的 WeatherButton 组件。

// main.js
import { createApp } from 'vue';
import { WeatherButton } from './WeatherButton.js';

const App = {
  components: {
    WeatherButton
  },
  template: `
    <div id="app">
      <WeatherButton></WeatherButton>
    </div>
  `
};

createApp(App).mount('#app');

通过 createApp 创建了一个新的 Vue 应用实例，并通过 mount 方法将其挂载到页面上的 #app 元素。

步骤 4：创建 HTML 文件 📄

最后，在 index.html 中，引入 Vue 库和 main.js 脚本。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Vue3 非 SFC 天气查询应用</title>
    <script type="module" src="https://unpkg.com/vue@next"></script>
    <script type="module" src="./main.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
</html>

结论 🎉

通过以上步骤，本文演示了如何使用 Vue3.x 的非 SFC 方式封装一个简单的天气查询按钮组件。这种方式不仅适用于轻量级或需要快速集成 Vue 的项目，也为开发者提供了更多的灵活性和选择。点击按钮，可以看到最新的天气信息显示在页面上，体验 Vue3.x 带来的便捷和强大功能。🌈

附录：在 Vue 中使用远端数据重新渲染的步骤及要点 🔄🌐

从远端 API 获取数据并基于这些数据动态渲染界面是非常常见的需求。Vue 提供了一套简洁的响应式系统和生命周期钩子，使得从远端获取数据并更新视图变得既简单又高效。下面将结合上述举例探讨在 Vue 应用中使用远端数据重新渲染组件的步骤及其要点。

步骤 1: 设计组件状态 📊

首先，确定组件需要哪些数据来渲染。这些数据通常会被定义为组件的状态（data 或使用 Composition API 中的 reactive/ref）。

步骤 2: 发起数据请求 📡

在 Vue 组件中，通常在 mounted 生命周期钩子中发起远端数据请求。如果使用 Vue3 的 Composition API，可以在 setup 函数中使用 onMounted 钩子。

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

const data = ref(null);

onMounted(async () => {
  data.value = await fetchDataFromAPI();
});

async function fetchDataFromAPI() {
  // 发起请求获取数据
  const response = await fetch('https://api.example.com/data');
  const jsonData = await response.json();
  return jsonData;
}
</script>

步骤 3: 数据绑定和渲染 🖼️

一旦获取到数据，就可以通过模板或渲染函数将数据绑定到视图上。Vue 的响应式系统会自动检测数据的变化，并重新渲染组件。

<template>
  <div v-if="data">{{ data }}</div>
  <div v-else>Loading...</div>
</template>

要点 📌

正确选择生命周期钩子：确定何时发起数据请求非常关键。mounted 或 onMounted 钩子在组件首次渲染到 DOM 后被调用，适合发起数据请求。
处理加载状态：在数据请求过程中，提供一个加载状态的反馈给用户可以改善用户体验。使用条件渲染显示加载提示或动画。
错误处理：网络请求可能失败，因此添加错误处理逻辑来捕获异常，并在界面上给予用户适当的反馈。
避免内存泄漏：在使用长时间运行的异步操作时，确保在组件销毁前取消这些操作，特别是在使用 watch、watchEffect 或在 mounted/onMounted 钩子中设置监听器时。
使用计算属性和侦听器：当需要根据远端数据进一步处理或转换数据时，计算属性（computed）是非常有用的。如果需要响应数据的变化执行副作用，可以使用侦听器（watch）。

通过遵循以上步骤和要点，可以有效地在 Vue 应用中从远端获取数据，并基于这些数据动态渲染和更新组件，构建出既动态又响应快速的用户界面。