一、Vue计算和监听

  • 计算属性（computed）：基于响应式数据进行复杂计算，有缓存机制，依赖数据未变则不会重新计算。例如：
computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}
  • 监听属性（watch）：用于观察数据变化并执行特定操作，如异步操作、深度监听等。例如：
watch: {
  someData(newVal, oldVal) {
    // 数据变化时执行的操作
  }
}

二、echart实例方法更新

Echarts 实例可通过如 setOption 等方法更新图表数据和配置。例如，先获取 Echarts 实例 let myChart = echarts.init(dom)，然后在数据变化时 myChart.setOption({...}) 来更新图表显示。

三、你刚才说用watch监听echart数据更新，为什么不用自带的update之类的函数

  • 数据处理逻辑：如果数据更新前需要进行一些 Vue 实例中的特定数据处理、状态变更或与其他数据的关联操作，watch 可以方便地在数据变化时统一处理这些逻辑，而不是仅依赖 Echarts 自身的更新函数。
  • 与 Vue 响应式系统结合：当 Vue 中的数据变化驱动 Echarts 图表更新时，watch 能更好地融入 Vue 的响应式体系，保证数据和视图的一致性更新，便于管理和维护代码结构。

四、Echarts 中update方法

update 方法可用于更新 Echarts 实例的配置项和数据。例如，在某些场景下可以直接调用 chart.update({...}) 来更新图表部分配置或数据，但要注意配置项的结构和数据的对应关系，不然可能导致图表显示异常。

五、Vue的状态

Vue 的状态主要是响应式数据，存储在 data 函数返回的对象中，这些数据变化会触发视图更新。也可以通过 Vuex 或 Pinia 等状态管理库管理全局状态，方便多组件共享和修改数据。

六、Vue生命周期函数

  • beforeCreate：实例刚被创建，数据观测和事件配置未开始。
  • created：实例创建完成，数据观测、属性和方法计算已完成，但未挂载到 DOM。
  • beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。
  • mounted：实例挂载到 DOM 后调用，可进行 DOM 操作等。
  • beforeUpdate：数据更新时调用，此时虚拟 DOM 已重新渲染，但未更新到真实 DOM。
  • updated：数据更新且 DOM 更新后调用。
  • beforeDestroy：实例销毁之前调用，可进行一些清理操作。
  • destroyed：实例销毁后调用。

七、Vuex和Pinia

  • Vuex：是 Vue 的状态管理模式，集中式存储管理应用的所有组件的状态。有 state（存储状态）、mutations（同步修改状态）、actions（可包含异步操作来提交 mutations）、getters（获取派生状态）等核心概念。例如：
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
})
  • Pinia：是 Vue 的轻量级状态管理库，旨在提供更简洁、直观的 API。它简化了很多 Vuex 的概念，例如不再区分 mutations 和 actions，使用 store.$patch 等方式直接修改状态，同时有更好的类型推断支持。例如：
import { defineStore } from 'pinia';
const useStore = defineStore('main', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++;
    }
  }
})

八、Vue静态全局数据

可以通过在 Vue 原型上挂载属性来设置全局数据，例如 Vue.prototype.$globalData = {... }，这样在所有组件中都可以通过 this.$globalData 访问，但要注意数据的变更可能不易追踪和管理，适用于一些全局的配置信息等。

九、前端开发（数据可视化）中做过的组件

  • 柱状图组件：封装 Echarts 柱状图，可接收数据、标题、坐标轴标签等属性，方便在不同页面复用。
  • 折线图组件：类似柱状图组件，用于展示数据随时间或其他连续变量的变化趋势，支持动态数据更新和交互功能。
  • 数据表格组件：结合 Element UI 或其他 UI 框架的表格组件，实现数据的展示、排序、筛选等功能，可根据需求定制表格样式和单元格内容展示形式。

十、做组件时候的心得

  • 封装性：注重组件的独立性和复用性，将内部逻辑和外部接口清晰分离，减少组件间的耦合度，便于维护和扩展。
  • 数据驱动：以数据为核心，通过 props 接收数据并根据数据变化更新视图，使组件的功能和显示更具灵活性和可预测性。
  • 交互性：考虑组件的交互设计，如点击事件、鼠标悬浮效果等，提升用户体验，但也要注意避免过度设计导致的性能和复杂性问题。

十一、手写代码：Vue实现一个todolist 上面列表和checkbox，下面输入框和按钮

<template>
  <div>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <input type="checkbox" v-model="todo.done">
        <span :class="{ 'done': todo.done }">{{ todo.text }}</span>
      </li>
    </ul>
    <input type="text" v-model="newTodoText" placeholder="添加新事项">
    <button @click="addTodo">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [],
      newTodoText: ''
    }
  },
  methods: {
    addTodo() {
      if (this.newTodoText) {
        this.todos.push({ text: this.newTodoText, done: false });
        this.newTodoText = '';
      }
    }
  }
}
</script>

<style>
.done {
  text-decoration: line-through;
}
</style>

十二、手写代码：js实现判断单链表是否环形

可以使用快慢指针法。定义两个指针，慢指针每次移动一步，快指针每次移动两步。如果链表有环，快指针最终会追上慢指针；如果快指针到达链表末尾（null），则链表无环。

function hasCycle(head) {
  let slow = head;
  let fast = head;
  while (fast && fast.next) {
    slow = slow.next;
    fast = fast.next.next;
    if (slow === fast) {
      return true;
    }
  }
  return false;
}

十三、快慢指针法一定会相遇吗

在单链表有环的情况下，快慢指针一定会相遇。因为快指针每次比慢指针多走一步，随着循环的进行，它们之间的距离会逐渐缩小，最终必然会重合。

十四、HTTP缓存

  • 强缓存：通过 Cache-Control 和 Expires 等头部字段控制，浏览器直接从缓存中读取资源，不向服务器发送请求。例如 Cache-Control: max-age=3600 表示资源在 3600 秒内有效。
  • 协商缓存：当强缓存过期后，浏览器向服务器发送请求，服务器根据资源的 Last-Modified 和 ETag 等字段判断资源是否有更新。如果没有更新，服务器返回 304 状态码，浏览器继续使用缓存资源；如果有更新，则返回新资源。

十五、上线项目后怎么确定客户端刷新缓存

  • 添加版本号或哈希值：在资源文件名中添加版本号或文件内容的哈希值，如 script.js?v=1.0.1 或 script.123456.js，每次更新文件时修改版本号或哈希值，强制浏览器重新下载资源。
  • 设置 HTTP 头部：使用 Cache-Control: no-cache 或 Cache-Control: must-revalidate 等头部信息，让浏览器在每次访问资源时都向服务器验证资源是否更新。

十六、还有哪些方法可以确保客户获取到最新的项目资源？

  • Service Worker：可以拦截网络请求，缓存资源并控制缓存策略，实现离线访问和资源更新推送等功能。例如，在 Service Worker 中监听 fetch 事件，根据策略返回缓存资源或从网络获取最新资源并更新缓存。
  • CDN 缓存更新：如果使用 CDN 服务，可通过 CDN 提供商的缓存刷新接口或配置，手动或自动清除 CDN 节点上的缓存资源，使客户端获取到最新资源。

十七、你了解React吗，Vue和React区别

  • 模板与 JSX：Vue 使用基于 HTML 的模板语法，将模板与逻辑分离；React 使用 JSX，在 JavaScript 中编写类似 HTML 的代码，更灵活但对开发者 JavaScript 能力要求较高。
  • 数据绑定：Vue 采用双向数据绑定，通过 v-model 等指令方便地实现数据与视图的双向同步；React 是单向数据绑定，数据流动更明确，需要开发者手动处理数据更新时的视图更新。
  • 状态管理：Vue 有 Vuex 和 Pinia 等状态管理库；React 常用 Redux 或 Recoil 等，它们在概念和使用方式上有一定差异，但都用于管理组件间共享状态。
  • 组件化：两者都有完善的组件化体系，但在组件的创建、传参、生命周期等细节上有不同的 API 和实现方式。例如 Vue 组件有单文件组件的形式，便于组织和维护代码。

标签: none

添加新评论