面试遇到的几个问题小记20250401

一、echarts设置数据的几种方式

在 ECharts 里，设置数据存在多种方式，下面为你详细介绍：

在初始化配置项时设置数据
这是最为常见的方式，也就是在创建 ECharts 实例的时候，于配置项 option 里直接设置数据。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

在这个例子中，xAxis.data 用来设置 x 轴的数据，series[0].data 则是设置系列的数据。
2. 使用 setOption 方法动态更新数据
要是你想在图表创建之后更新数据，可使用 setOption 方法。

// 假设已经有了一个 ECharts 实例 myChart
var newData = [1000, 1100, 1200, 1300, 1400, 1500, 1600];
var newOption = {
    series: [{
        data: newData
    }]
};
myChart.setOption(newOption);

此方式会用新的数据替换原有的数据。
3. 使用 appendData 方法追加数据
若你只需追加数据而不想要替换已有数据，可使用 appendData 方法。

// 假设已经有了一个 ECharts 实例 myChart
var appendData = [1700, 1800];
myChart.appendData([{
    seriesIndex: 0,
    data: appendData
}]);

这种方式会在原数据的基础上追加新的数据。
4. 通过异步加载数据
若数据来自服务器，你可以使用 AJAX 等方式异步加载数据，然后再设置到 ECharts 中。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 模拟异步加载数据
$.ajax({
    url: 'your-data-url',
    method: 'GET',
    success: function (data) {
        var option = {
            xAxis: {
                type: 'category',
                data: data.xData
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: data.yData,
                type: 'line'
            }]
        };
        myChart.setOption(option);
    },
    error: function () {
        console.log('数据加载失败');
    }
});

二、vue3的生命周期

选项式 API 生命周期

选项式 API 的生命周期函数和 Vue 2 很相似，只是移除了 beforeCreate 和 created，可以在组件选项里直接使用。

export default {
    // 组件挂载之前调用
    beforeMount() {
        console.log('Before Mount');
    },
    // 组件挂载完成后调用
    mounted() {
        console.log('Mounted');
    },
    // 组件更新之前调用
    beforeUpdate() {
        console.log('Before Update');
    },
    // 组件更新完成后调用
    updated() {
        console.log('Updated');
    },
    // 组件卸载之前调用
    beforeUnmount() {
        console.log('Before Unmount');
    },
    // 组件卸载完成后调用
    unmounted() {
        console.log('Unmounted');
    },
    // 当捕获到一个来自后代组件的错误时被调用
    errorCaptured() {
        console.log('Error Captured');
    },
    // 在渲染器触发缓存组件的激活动作时调用
    activated() {
        console.log('Activated');
    },
    // 在渲染器触发缓存组件的失活动作时调用
    deactivated() {
        console.log('Deactivated');
    },
    // 在组件实例被创建之后，数据观测和 event/watcher 事件配置之前被调用
    // 虽然保留，但不推荐使用
    // beforeCreate() {
    //     console.log('Before Create');
    // },
    // 在实例初始化完成后被调用
    // 虽然保留，但不推荐使用
    // created() {
    //     console.log('Created');
    // },
}

组合式 API 生命周期

组合式 API 中使用生命周期钩子需要从 vue 导入相应函数。

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onErrorCaptured, onActivated, onDeactivated } from 'vue';

export default {
    setup() {
        onBeforeMount(() => {
            console.log('Before Mount');
        });

        onMounted(() => {
            console.log('Mounted');
        });

        onBeforeUpdate(() => {
            console.log('Before Update');
        });

        onUpdated(() => {
            console.log('Updated');
        });

        onBeforeUnmount(() => {
            console.log('Before Unmount');
        });

        onUnmounted(() => {
            console.log('Unmounted');
        });

        onErrorCaptured((err, instance, info) => {
            console.log('Error Captured');
            return false;
        });

        onActivated(() => {
            console.log('Activated');
        });

        onDeactivated(() => {
            console.log('Deactivated');
        });

        return {};
    },
};

三、大屏首页加载优化

大屏首页的加载速度会直接影响用户体验，下面从前端、后端、数据处理等多个方面为你介绍优化大屏首页加载的方法：
前端优化

代码压缩与合并
压缩：使用工具如 UglifyJS 压缩 JavaScript 代码，cssnano 压缩 CSS 代码，减少文件体积。
合并：将多个 CSS 和 JavaScript 文件合并成一个，减少 HTTP 请求。
图片优化
选择合适的图片格式：对于色彩丰富的图片，使用 JPEG；对于有透明效果的图片，使用 PNG；对于简单的图标和动画，使用 SVG。
图片压缩：使用工具如 TinyPNG 对图片进行压缩，减小文件大小。
懒加载：对于非首屏展示的图片，使用懒加载技术，当图片进入可视区域时再加载。
按需加载
路由懒加载：在单页面应用中，使用路由懒加载，只有当用户访问某个路由时才加载对应的组件。

const Home = () => import('./views/Home.vue')
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

组件懒加载：对于一些不常用的组件，可以使用懒加载，只有在需要时才加载。
4. 缓存机制
浏览器缓存：设置合理的 HTTP 缓存头，让浏览器缓存静态资源，减少重复请求。
本地存储：使用 localStorage 或 sessionStorage 缓存一些不经常变化的数据。
5. 优化 CSS 加载顺序
将关键的 CSS 代码内联到 HTML 文件中，优先加载，避免页面闪烁。
后端优化

服务器优化
选择高性能服务器：选择性能好、带宽充足的服务器，确保能够快速响应请求。
服务器配置优化：调整服务器的配置参数，如调整 Nginx 的 worker_processes、worker_connections 等参数，提高服务器的并发处理能力。
数据缓存
数据库缓存：使用数据库缓存技术，如 Redis，缓存经常查询的数据，减少数据库的访问压力。
API 缓存：对一些不经常变化的 API 接口进行缓存，当数据没有变化时，直接返回缓存结果。
负载均衡
使用负载均衡器，如 Nginx、HAProxy 等，将请求均匀地分配到多个服务器上，提高系统的并发处理能力。
数据处理优化
数据精简
只返回必要的数据：在后端接口中，只返回前端需要的数据，避免返回过多的冗余数据。
数据分页：对于大量数据，采用分页的方式返回，减少单次请求的数据量。
数据预取
在用户可能访问的页面或功能中，提前预取相关的数据，当用户访问时可以直接使用，减少等待时间。
其他优化
骨架屏
在页面加载时，显示骨架屏，给用户一种页面正在快速加载的视觉反馈，提高用户体验。
代码分割
将代码按照功能模块进行分割，只加载当前页面需要的代码，减少首屏加载的代码量。
通过以上多种优化方法的综合使用，可以显著提高大屏首页的加载速度，提升用户体验

四、vue兄弟组件通讯

在 Vue 里，兄弟组件之间通讯指的是两个非父子关系的组件之间进行数据传递和事件触发。下面为你介绍几种常见的 Vue 兄弟组件通讯方法。

使用事件总线（Event Bus）
事件总线是一个空的 Vue 实例，可在组件之间传递事件和数据。
实现步骤
创建一个事件总线实例。
在发送数据的组件里触发事件并传递数据。
在接收数据的组件中监听事件并处理数据。
代码示例

// event-bus.js
import Vue from 'vue';
export const eventBus = new Vue();

// SenderComponent.vue
<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script>
import { eventBus } from './event-bus.js';
export default {
  methods: {
    sendMessage() {
      const message = '这是来自兄弟组件的消息';
      eventBus.$emit('message-sent', message);
    },
  },
};
</script>

// ReceiverComponent.vue
<template>
  <div>{{ receivedMessage }}</div>
</template>

<script>
import { eventBus } from './event-bus.js';
export default {
  data() {
    return {
      receivedMessage: '',
    };
  },
  mounted() {
    eventBus.$on('message-sent', (message) => {
      this.receivedMessage = message;
    });
  },
  beforeDestroy() {
    eventBus.$off('message-sent');
  },
};
</script>

在这个示例中，SenderComponent 借助 eventBus. $e mi t 触发 m ess a g e - se n t 事件并传递消息， R ece i v er C o m p o n e n t 利用 e v e n tB u s .$ on 监听该事件并接收消息。在组件销毁前，要使用 eventBus.$off 移除事件监听器，避免内存泄漏。
2. 使用 Vuex 状态管理库
Vuex 是专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
实现步骤
安装并配置 Vuex。
在组件中使用 mapState 和 mapMutations 等辅助函数来获取和修改状态。
代码示例

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: '',
  },
  mutations: {
    setMessage(state, newMessage) {
      state.message = newMessage;
    },
  },
});

// SenderComponent.vue
<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
  methods: {
    ...mapMutations(['setMessage']),
    sendMessage() {
      const message = '这是来自兄弟组件的消息';
      this.setMessage(message);
    },
  },
};
</script>

// ReceiverComponent.vue
<template>
  <div>{{ message }}</div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['message']),
  },
};
</script>

在这个示例中，SenderComponent 通过 mapMutations 调用 setMessage 方法来修改 Vuex 中的状态，ReceiverComponent 利用 mapState 获取状态并显示。
3. 使用 provide/inject
在 Vue 3 里，provide 和 inject 可以用于跨层级组件通信，也能间接实现兄弟组件通信。
实现步骤
在共同的父组件中使用 provide 提供数据。
在兄弟组件中使用 inject 注入数据。
代码示例

<!-- ParentComponent.vue -->
<template>
  <div>
    <SenderComponent />
    <ReceiverComponent />
  </div>
</template>

<script setup>
import { ref, provide } from 'vue';
import SenderComponent from './SenderComponent.vue';
import ReceiverComponent from './ReceiverComponent.vue';

const sharedMessage = ref('');

const updateMessage = (newMessage) => {
  sharedMessage.value = newMessage;
};

provide('sharedMessage', sharedMessage);
provide('updateMessage', updateMessage);
</script>

<!-- SenderComponent.vue -->
<template>
  <button @click="sendMessage">发送消息</button>
</template>

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

const updateMessage = inject('updateMessage');

const sendMessage = () => {
  const message = '这是来自兄弟组件的消息';
  updateMessage(message);
};
</script>

<!-- ReceiverComponent.vue -->
<template>
  <div>{{ sharedMessage }}</div>
</template>

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

const sharedMessage = inject('sharedMessage');
</script>