2024年Web前端最新12 个 Vue 开发中的性能优化小技巧，2024大厂前端面试手册

框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

{{ value }}

// 或者

Vue.component(‘my-component’, {

functional: true, // 表示该组件为函数式组件

props: { … }, // 可选

// 第二个参数为上下文，没有 this

render: function (createElement, context) {

// …

}

})

6. 子组件分割

---

先看个例子

{{ someThing() }}

上面这样的代码中，每次父组件传过来的 number 发生变化时，每次都会重新渲染，并且重新执行 someThing 这个耗时任务

所以优化的话一个是用计算属性，因为计算属性自身有缓存计算结果的特性

第二个是拆分成子组件，因为 Vue 的更新是组件粒度的，虽然第次数据变化都会导致父组件的重新渲染，但是子组件却不会重新渲染，因为它的内部没有任何变化，耗时任务自然也就不会重新执行，因此性能更好，优化代码如下

  

7. 变量本地化

---

简单说就是把会多次引用的变量保存起来，因为每次访问 this.xx 的时候，由于是响应式对象，所以每次都会触发 getter，然后执行依赖收集的相关代码，如果使用变量次数越多，性能自然就越差

从需求上说在一个函数里一个变量执行一次依赖收集就够了，可是很多人习惯性的在项目中大量写 this.xx，而忽略了 this.xx 背后做的事，就会导致性能问题了

比如下面例子

 

 {{ result

}}

8. 第三方插件按需引入

---

比如 Element-UI 这样的第三方组件库可以按需引入避免体积太大，特别是项目不大的情况下，更没有必要完整引入组件库

// main.js

import Element3 from “plugins/element3”;

Vue.use(Element3)

// element3.js

// 完整引入

import element3 from “element3”;

import “element3/lib/theme-chalk/index.css”;

// 按需引入

// import “element3/lib/theme-chalk/button.css”;

// …

// import {

// ElButton,

// ElRow,

// ElCol,

// ElMain,

// …

// } from “element3”;

export default function (app) {

// 完整引入

app.use(element3)

// 按需引入

// app.use(ElButton);

}

9. 路由懒加载

---

我们知道 Vue 是单页应用，所以如果没有用懒加载，就会导致进入首页时需要加载的内容过多，时间过长，就会出现长时间的白屏，很不利于用户体验，SEO 也不友好

所以可以去用懒加载将页面进行划分，需要的时候才加载对应的页面，以分担首页的加载压力，减少首页加载时间

没有用路由懒加载：

import Home from ‘@/components/Home’

const router = new VueRouter({

routes: [

{ path: ‘/home’, component: Home }

]

})

用了路由懒加载：

const router = new VueRouter({

routes: [

{ path: ‘/home’, component: () =>

import(‘@/components/Home’) },

{ path: ‘/login’, component:

require(‘@/components/Home’).default }

]

})

在进入这个路由的时候才会走对应的 component，然后运行 import 编译加载组件，可以理解为 Promise 的 resolve 机制

• import：Es6语法规范、编译时调用、是解构过程、不支持变量函数等

• require：AMD规范、运行时调用、是赋值过程，支持变量计算函数等

更多有关前端模块化的内容可以看我另一篇文章 前端模块化规范详细总结

10. keep-alive缓存页面

---

比如在表单输入页面进入下一步后，再返回上一步到表单页时要保留表单输入的内容、比如在列表页>详情页>列表页，这样来回跳转的场景等

我们都可以通过内置组件 <keep-alive></keep-alive> 来把组件缓存起来，在组件切换的时候不进行卸载，这样当再次返回的时候，就能从缓存中快速渲染，而不是重新渲染，以节省性能

只需要包裹想要缓存的组件即可

 

    

• 也可以用 include/exclude 来 缓存/不缓存 指定组件

• 可通过两个生命周期 activated/deactivated 来获取当前组件状态

11. 事件的销毁

---

Vue 组件销毁时，会自动解绑它的全部指令及事件监听器，但是仅限于组件本身的事件

而对于定时器、addEventListener 注册的监听器等，就需要在组件销毁的生命周期钩子中手动销毁或解绑，以避免内存泄露

12. 图片懒加载

---

图片懒加载就是对于有很多图片的页面，为了提高页面加载速度，只加载可视区域内的图片，可视区域外的等到滚动到可视区域后再去加载

这个功能一些 UI 框架都有自带的，如果没有呢？

推荐一个第三方插件 vue-lazyload

npm i vue-lazyload -S

// main.js

import VueLazyload from ‘vue-lazyload’

Vue.use(VueLazyload)

// 接着就可以在页面中使用 v-lazy 懒加载图片了

或者自己造轮子，手动封装一个自定义指令，这里封装好了一个兼容各浏览器的版本的，主要是判断浏览器支不支持 IntersectionObserver API，支持就用它实现懒加载，不支持就用监听 scroll 事件+节流的方式实现

const LazyLoad = {

// install方法

install(Vue, options) {

const defaultSrc = options.default

Vue.directive(‘lazy’, {

bind(el, binding) {

LazyLoad.init(el, binding.value, defaultSrc)

},

inserted(el) {

if (IntersectionObserver) {

LazyLoad.observe(el)

} else {

LazyLoad.listenerScroll(el)

}

},

})

},

// 初始化

init(el, val, def) {

el.setAttribute(‘data-src’, val)

el.setAttribute(‘src’, def)

},

// 利用IntersectionObserver监听el

observe(el) {

var io = new IntersectionObserver((entries) => {

const realSrc = el.dataset.src

if (entries[0].isIntersecting) {

if (realSrc) {

el.src = realSrc

el.removeAttribute(‘data-src’)

}

}

})

io.observe(el)

},

// 监听scroll事件

listenerScroll(el) {

const handler =

LazyLoad.throttle(LazyLoad.load, 300)

LazyLoad.load(el)

window.addEventListener(‘scroll’, () => {

handler(el)

})

},

// 加载真实图片

load(el) {

const windowHeight =

document.documentElement.clientHeight

const elTop = el.getBoundingClientRect().top

const elBtm =

el.getBoundingClientRect().bottom

const realSrc = el.dataset.src

if (elTop - windowHeight < 0 && elBtm > 0) {

if (realSrc) {

el.src = realSrc

el.removeAttribute(‘data-src’)

}

}

},

// 节流

throttle(fn, delay) {

let timer

let prevTime

总结

根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

这里分享一些前端学习笔记：

• html5 / css3 学习笔记

  

• JavaScript 学习笔记

  

• Vue 学习笔记

  

(realSrc) {

el.src = realSrc

el.removeAttribute(‘data-src’)

}

}

},

// 节流

throttle(fn, delay) {

let timer

let prevTime

总结

根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

这里分享一些前端学习笔记：

• html5 / css3 学习笔记

  

• JavaScript 学习笔记

  

• Vue 学习笔记