Jude's Vuepress

1、diff算法的原理？

# 1、diff算法的原理？

DIFF 算法通过比较新旧两棵虚拟 DOM 树找出不同点，只更新必要部分以高效更新真实 DOM。虚拟 DOM 是对真实 DOM 的抽象表示，是 JavaScript 对象，可快速创建、更新并在内存中操作。DIFF 算法的核心步骤包括树的递归比较、同层比较、节点的复用和更新。在 Vue 中，DIFF 比较主要发生在组件更新阶段，通过响应式数据模型产生新虚拟 DOM 树并与旧树对比。优化策略有使用 Key 优化列表渲染性能和批量更新避免重复比较和更新。React 和 Vue 虽都用虚拟 DOM 和 DIFF 算法，但实现细节不同，React 侧重函数式编程和不可变数据，Vue 专注响应式数据和模板语法。

  • DIFF 算法核心原理：通过比较新旧虚拟 DOM 树找出不同点，只更新必要部分以高效更新真实 DOM，避免不必要的 DOM 操作。
  • 虚拟 DOM：对真实 DOM 的抽象表示，是 JavaScript 对象，可快速创建和更新，在内存中操作，避免频繁操作真实 DOM。
  • Vue 中的 DIFF 算法：在组件更新阶段，根据响应式数据模型产生新虚拟 DOM 树并与旧树对比，找出变化部分更新真实 DOM。
  • 优化策略：使用 Key 优化列表渲染性能，批量更新避免重复比较和更新真实 DOM。
  • React 与 Vue 的对比：都使用虚拟 DOM 和 DIFF 算法，但实现细节不同，React 侧重函数式编程和不可变数据，Vue 专注响应式数据和模板语法。

# 2、如何实现vue权限管理及按钮级权限管理？

权限数据准备：从后台接口获取用户权限列表，通常包含用户角色和对应的权限，如一个包含用户可访问权限代码的数组。

全局权限管理：通过 Vuex 或 Vue Composition API 全局管理用户权限信息，方便在各个组件中进行权限校验，例如利用 Vuex 的 state、mutations 和 actions 来管理权限数据。

路由权限控制：使用 Vue Router 的导航守卫 beforeEach 守卫来控制用户对不同路由的访问权限，根据路由的 meta 属性判断是否需要特定权限。

组件权限管理：在组件内使用指令或计算属性来控制具体按钮或操作的显示与否，如通过全局注册自定义指令 v-permission 判断按钮级别的权限。

其他扩展：包括混入（Mixins）可将权限判断逻辑封装便于复用、动态加载路由根据权限生成可访问路由提高安全性、在 Vue 3 中使用组合式 API 进行权限管理更简洁灵活。

# 3、vue渲染大量数据，如何优化？

  • 使用虚拟滚动：借助 vue-virtual-scroll-list 等库实现虚拟滚动，仅渲染视窗内数据，减少 DOM 节点数。

  • 懒加载渲染：利用 Vue 的 keep-alive 组件或第三方插件分批次渲染数据。

  • 事件代理：将事件监听器绑定到父元素，减少内存占用和性能开销。

  • 优化计算属性和侦听器：使用计算属性替代方法，合理使用侦听器，避免不必要计算。

  • 避免全局状态管理滥用：尽量在局部组件管理状态，减少全局状态改变引起的重新渲染。

  • 使用原生方法提升性能：结合 JavaScript 原生方法如 createDocumentFragment 批量操作 DOM。

  • 组件懒加载：利用 Vue 的异步组件特性按需加载组件，缩短应用首次加载时间。

  • 使用 Web Worker：处理计算密集型任务，减轻主线程负担，提高用户界面响应速度。

  • 减少渲染节点中的复杂度：减少组件树嵌套层次，合理规划组件，避免性能受影响。

  • 选择合适的数据结构和算法：优化数据结构和算法，提高处理大量数据效率，如用 Map 和 Set 替代数组操作。

  • 外部代码库的使用：如 Lodash 的 throttle 和 debounce 函数，在高频事件处理中优化性能。

# 4、vue2和vue3的区别？vue3有哪些更新？

  • 性能优化：Vue 3 的核心目标之一是性能优化，通过编译器和虚拟 DOM 的优化升级，在大规模应用中提升渲染和响应速度。编译工具能生成更优化的模板渲染函数，提高模板编译结果的效率。

  • Composition API：是 Vue 3 的重要更新，以函数形式编写逻辑，便于逻辑复用，相比 Vue 2 的 Options API 更加模块化，避免代码成块、难以维护的问题。

  • Tree-shaking 支持：Vue 3 优化了 Tree-shaking 技术，在打包时能去掉未使用的代码，减少应用最终体积，当只使用框架一部分特性时效果显著。

  • Fragments：Vue 3 引入 Fragments，打破了 Vue 2 中每个组件必须有一个唯一根元素的限制，使开发者在设计模板时更加灵活方便，避免不必要的 DOM 层级。

  • Teleport：Vue 3 新功能，允许将组件模板渲染到 DOM 树中的任意位置，对于处理全局模态框、通知等 UI 组件非常有用。

  • 新的响应式系统：Vue 3 使用 Proxy 对象代替 Vue 2 的 Object.defineProperty 实现响应式数据，更加简洁且性能更高，在处理嵌套对象和数组时效果显著，解决了 Vue 2 中的一些边界问题。

  • 额外说明：

Vue 3 在 Tree-shaking（树摇）优化方面做了重大改进，通过架构设计和代码组织的优化，显著减少了最终打包体积。以下是 Vue 3 优化 Tree-shaking 的核心手段及其原理：

# 1. 模块化架构设计

Vue 3 的代码库被彻底模块化，所有功能按需拆分到独立模块中。例如：

  • 核心功能（如响应式系统、虚拟 DOM）独立为 @vue/reactivity、@vue/runtime-core
  • 可选功能（如过渡动画、指令）单独封装成模块
  • 全局 API（如 Vue.directive、Vue.component）改为按需导入

示例对比：

// Vue 2 (全局 API，无法 Tree-shaking)
import Vue from 'vue'
Vue.directive('focus', { /* ... */ })

// Vue 3 (按需导入，未使用的代码可被移除)
import { createApp, directive } from 'vue'
directive('focus', { /* ... */ })

# 2. ES Module 优先

Vue 3 的构建产物默认提供 ES Module 格式（package.json 中设置 "module": "dist/vue.esm-bundler.js"），现代打包工具（如 Webpack、Rollup）能直接分析模块依赖关系，精确识别未使用的代码。

# 3. 组合式 API 的天然优势

组合式 API（Composition API）的设计鼓励按需引入功能：

// 仅引入需要的功能，未使用的模块会被 Tree-shaking
import { ref, onMounted } from 'vue'

相比之下，Vue 2 的选项式 API（Options API）需要完整的对象结构，导致打包工具难以分析代码使用情况。

# 4. 编译器静态标记

Vue 3 的模板编译器会在编译阶段生成带有静态标记的代码，帮助打包工具识别哪些导出可能被使用。例如：

// 编译后的代码会标记可能使用的功能
import { createVNode as _createVNode, openBlock as _openBlock } from "vue"

// 如果未使用 v-model，相关代码会被移除

# 5. 全局 API 重构

Vue 3 移除了所有全局 API 的默认导出，改为通过具名导出或实例方法访问：

// 旧版全局 API (Vue 2) - 强制包含所有代码
import Vue from 'vue'
Vue.nextTick()

// 新版按需导入 (Vue 3) - 未使用则被 Tree-shaking
import { nextTick } from 'vue'
nextTick()

# 6. 按需引入的生态系统

Vue 3 的配套工具链（如 Vue Router 4、Vuex 4）也遵循同样的优化原则：

// Vue Router 4 按需引入
import { createRouter, createWebHistory } from 'vue-router'

// 未使用的 History 模式代码可被移除

# 效果对比

场景 Vue 2 打包体积 Vue 3 打包体积
仅核心功能 ~23KB ~13KB (-43%)
使用路由+状态管理 ~40KB ~26KB (-35%)

# 开发者最佳实践

  1. 使用支持 Tree-shaking 的打包工具（如 Webpack 4+、Rollup、Vite）
  2. 避免全局注册，改用按需导入：
    // 错误做法 (全局注册导致包含所有组件)
app.component('MyComponent', MyComponent)

// 正确做法 (按需导入)
import { MyComponent } from './components'
  3. 选择 Tree-shaking 友好的库（如使用 Lodash-es 替代 Lodash）

# 总结

Vue 3 的 Tree-shaking 优化通过 模块化架构 + ES Module 格式 + 编译器协作 实现，使得最终打包体积平均减少 30-50%。这种改进尤其对大型项目或对性能敏感的场景（如移动端、低网速环境）有重要意义。

# 5、vuex的实现原理？

Vuex 是 Vue.js 专用的状态管理库，集中管理应用状态。实现原理包括中央存储、单向数据流、Getters、Actions 和 Modules 等方面。在与 Vue 结合使用时，需安装和配置 Vuex，组件通过特定方式获取和更改状态，异步操作要分发 action。

  • Vuex 的作用及实现原理：Vuex 是 Vue.js 的状态管理库，通过中央存储集中管理状态，强调单向数据流保证数据可预测和可追踪，Getters 可派生状态，Actions 包含异步操作并调用 mutations 改变状态，Modules 支持模块化使代码更具组织性和可维护性。

  • Vuex 与 Vue 的结合使用：安装和配置 Vuex 后，组件可通过 this.store.state 访问全局 state，但不能直接更改，需通过 this.store.commit('mutationName')触发 mutation 改变 state，异步操作应分发 action。给出的示例展示了如何安装 Vuex、创建 store、创建 Vue 实例并在其中使用 Vuex 的各种功能。

// 安装 Vuex
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

// 创建 store
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  },
  modules: {
    // 可以在这里定义更复杂的嵌套结构
  }
});

// 创建 Vue 实例
new Vue({
  el: '#app',
  store, // 注入 store 到 vue 实例
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    incrementAsync() {
      this.$store.dispatch('incrementAsync');
    }
  }
});

# 6、如何优化首屏加载速度?

重点方法包括使用路由懒加载、开启 gzip 压缩、利用 CDN、减少入口文件体积和图像及资源优化。扩展知识涵盖了 SSR（服务端渲染）、骨架屏、按需加载第三方库、缓存策略（PWA）、性能分析工具和代码拆分等方面。

  • 路由懒加载：将不同路由对应的组件分块，仅加载用户当前访问页面所需代码，减少初始加载量，加快首页加载速度。
  • 开启 gzip 压缩：压缩传送文件，降低传输数据量，提升加载速度，尤其对于较大文件效果明显。
  • 利用 CDN：将静态资源放置在 CDN 上，提高资源获取速度，减少服务器压力。
  • 减少入口文件体积：拆分大文件为小文件，按需加载，降低初始加载时间，使首页加载更迅速。
  • 图像和资源优化：优先使用更小的图片格式如 WebP，并采用懒加载技术，在用户需要时才加载图片，提高页面加载性能。
  • SSR（服务端渲染）：使用 Nuxt.js 等工具实现服务端渲染，加快首屏加载时间，同时提升 SEO 性能。
  • 骨架屏：作为占位技术，加载简化的 UI 结构，提升用户感知速度，避免页面阻塞感。
  • 按需加载第三方库：以 Lodash 为例，只引入所需模块，减少打包后文件大小，优化性能。
  • 缓存策略（PWA）：使用渐进式 Web 应用和浏览器缓存策略，缓存静态资源和 API 请求，加快后续访问速度。
  • 性能分析工具：如 Vue Devtools 中的 Performance Tab，用于分析并优化应用性能，找出性能瓶颈。
  • 代码拆分：除路由懒加载外，使用 Webpack 的代码拆分和动态 Import 按需加载不同模块，进一步优化性能。

# 7、前端页面请求耗时工具

通过拦截网络请求记录时间点并计算差值来实现工具

  • 请求耗时统计工具设计：关键在于拦截请求和响应，记录时间点并计算差值，存储和展示数据。可以使用 XMLHttpRequest 或 fetch API 的拦截器，将耗时数据存储在浏览器内存或本地存储等位置，并可展示在浏览器控制台或专门页面。拦截网络请求并计算耗时存储在 localStorage 中。
(function() {
    const originalFetch = window.fetch;
    window.fetch = async function(...args) {
        const startTime = performance.now();
        const response = await originalFetch.apply(this, args);
        const endTime = performance.now();
        
        const url = args[0];
        const duration = endTime - startTime;
        console.log(`Request to ${url} took ${duration} ms`);
        
        saveRequestTiming(url, duration);
        return response;
    };

    function saveRequestTiming(url, duration) {
        // 可以将数据存储在 localStorage 或者发送到服务器进行集中处理
        let timings = JSON.parse(localStorage.getItem('requestTimings') || '[]');
        timings.push({ url, duration, timestamp: new Date().toISOString() });
        localStorage.setItem('requestTimings', JSON.stringify(timings));
    }
})();
  • 用户体验与性能指标：页面加载速度影响用户体验，响应速度慢可能导致用户流失。常见前端性能指标如 FCP、LCP 等，请求耗时只是页面性能的一部分，整体性能还包括渲染时间、资源加载时间等。
  • 监控工具：Google Chrome 的开发者工具、Lighthouse、New Relic 等可帮助监控和分析页面性能。
  • 跨浏览器兼容性：XMLHttpRequest 和 fetch 在老旧浏览器中可能有兼容性问题，确保监控工具在各种浏览器上表现一致很重要。
  • 安全和隐私：记录和上传数据时要确保不泄露敏感信息，如用户认证信息和查询参数中的敏感内容。实际开发中可只记录重要业务请求，避免数据量过大并聚焦重要性能问题。

# 8、浏览器执行多任务不卡顿？页面一次性渲染大量数据页面不卡顿？

主要通过任务拆分和分布到多个事件循环中执行，包括使用 setTimeout 或 requestAnimationFrame，将任务分成较小批次处理。

  • 任务拆分与异步调度：为在浏览器中执行大量任务不卡顿，可将 100 万个任务分成较小批次，使用 setTimeout 或 requestAnimationFrame 进行异步调度，分散到不同事件循环中执行，示例代码展示了具体的处理过程。
const tasks = Array(1000000).fill(() => {
    // 这里是每个任务的逻辑
    console.log('Task executed');
});

function processBatch(tasks, batchSize = 1000) {
    if (tasks.length === 0) {
        return;
    }
    const batch = tasks.splice(0, batchSize);
    for (let task of batch) {
        task();
    }
    // 使用 requestAnimationFrame 确保每一帧渲染之间的任务处理
    requestAnimationFrame(() => processBatch(tasks, batchSize));
}

// 开始处理任务
processBatch(tasks);
  • 理解事件循环机制：浏览器的 JavaScript 运行基于事件循环，若单个任务执行时间过长会阻塞后续任务导致页面卡顿。任务拆分后可在每一帧刷新间隔分布任务，避免长时间单一任务阻塞。
  • Web Workers 解决方案：对于任务密集且计算量大的情况，可考虑使用 Web Workers，在浏览器后台线程运行 JavaScript，不阻塞主线程以保证页面流畅响应，创建和使用 Web Workers 的代码示例。
// 创建 Web Worker
const worker = new Worker('worker.js');

// 在 worker.js 中：
self.onmessage = function(e) {
    const tasks = e.data;
    for (let task of tasks) {
        // 执行任务
        // 注意：Web Worker 中不允许直接操作 DOM
        console.log('Task executed in Web Worker');
    }
    self.postMessage('done');
};

// 传递任务给 Web Worker
worker.postMessage(tasks);
worker.onmessage = function(e) {
    if (e.data === 'done') {
        console.log('All tasks completed in Web Worker');
    }
};
  • 闲置时间处理：浏览器提供 requestIdleCallback，可在浏览器空闲时执行任务，虽可能不如其他方法高效，但在特定场景有用，同样给出了处理任务的代码示例。
function processBatchIdle(tasks) {
    if (tasks.length === 0) {
        return;
    }
    const task = tasks.shift();
    task();
    requestIdleCallback(() => processBatchIdle(tasks));
}

// 开始处理任务
processBatchIdle(tasks);

在页面内一次性渲染 10 万条数据并保证页面不卡顿的问题，解决方案:

  • 虚拟列表技术：核心思想是只渲染用户可见区域的元素，对其他元素进行懒加载或隐藏处理，减少浏览器渲染开销，既能满足数据量处理需求，又有良好性能表现。
  • 惰性加载：类似虚拟列表概念，主要用于图像和其他资源，只加载用户视口内数据，滚动到对应区域再加载，减轻初始化数据加载压力。
  • 分片渲染：将数据分成小片段逐步渲染，每渲染一个片段后让出执行权，让浏览器有时间处理其他任务，避免一次性渲染卡顿。
  • 防抖和节流：控制用户频繁操作时事件触发频率，避免多余计算和渲染，常见于监听窗口滚动事件以控制虚拟列表重新渲染频率。
  • 使用 Web Workers：在浏览器主线程之外运行脚本，避免干扰页面渲染和交互，虽不能直接操作 DOM，但可处理复杂计算和数据预处理任务，通过消息传递与主线程通信。
  • 分页加载：处理大数据集的常用方法，用户只能看到当前页数据，翻页时动态加载下一页数据，减少一次性渲染的数据量。

# 9、webpack插件底层实现原理？

  • Webpack 插件底层原理：基于强大的插件系统，使用 Tapable 库创建钩子，插件可在 Webpack 构建生命周期不同阶段挂钩执行特定任务。钩子类型有同步钩子和异步钩子等。
  • 插件机制：插件通过定义包含 apply 方法的类实现，apply 方法接收 compiler 对象，插件在该方法中使用钩子注册回调函数执行自定义逻辑。
  • 插件基本结构：通常是一个 JavaScript 类，具有 apply 方法.
  • 常见 Webpack 插件：HtmlWebpackPlugin 自动生成 HTML 文件并注入打包后文件；CleanWebpackPlugin 每次构建前清理输出目录；MiniCssExtractPlugin 将 CSS 提取到单独文件中。
  • 插件与 Loader 区别：Loader 主要转换文件内容，插件执行更广泛任务，包括优化、资源管理和注入环境变量等。
  • Tapable 钩子类型：SyncHook 同步执行，AsyncSeriesHook 异步按顺序执行，AsyncParallelHook 异步并行执行。
  • 插件使用：在 Webpack 配置文件的 plugins 数组中引入和配置插件。

# 10、vue-router如何获取路由传递过来的参数？

  • 动态路由匹配：通过类似 /user/:id 的路径定义动态路由参数，可使用 this.$route.params 获取。应用场景通常为资源路径，如用户页面、文章页面等，URL 简洁明了且符合语义化。
  • 查询参数：在 URL 中以查询字符串形式传递参数，如 /user?id=123，通过 this.$route.query 获取。适用于筛选、搜索等功能，更适合多参数组合且顺序不固定的场景。
  • 混合使用：可以同时使用动态路由和查询参数，如 /user/123?tab=info，结合两者优点，既保证路径简洁又增加参数多样性。
  • 观察参数变化：可通过 Vue 的 $watch 或 lifecycle hook 监听路由参数变化，如在 watch 中处理路由变化并输出参数。
export default {
  name: 'UserComponent',
  watch: {
    '$route' (to, from) {
      // 当路由发生变化时, 处理逻辑
      console.log(to.params.id);
    }
  }
}
  • 路由传参最佳实践：实际开发中保持路由参数简洁有意义，考虑数据量、SEO 需求、用户可读性等因素，合理选择参数传递方式，并做好参数验证和默认值处理。

Q&A vue3