2024年最全从 vue 1，2024年最新一线互联网大厂中高级前端面试真题收录

性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）

2.如何优化webpack构建的性能

3.移动端的性能优化

4.Vue的SPA 如何优化加载速度

5.移动端300ms延迟

6.页面的重构

所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。

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

}

// 这里我们定义了动画开始的状态，以及过渡的状态，动画最终的状态就是这个元素自己本身的样式

在 vue 2.x 中：

transition 的用法还是有很大区别的。

首先，它不像 vue 1.x 那样写在目标元素上，而是 Vue 提供了 transition 的封装组件。

toggled content

<transition> 元素作为单个元素/组件的过渡效果。<transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在检测过的组件层级中。

相较于 vue 1.x 中的 3 个 css 过渡类名（v-transition、v-enter、v-leave），vue 2.x 中有 6 个 class 切换。

1、v-enter

2、v-enter-active ： 定义过渡状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。（这个类似 vue 1.x 中的 v-transition ，但是不同 vue 1.x 中的是，它会在动画完成之后移除）

3、v-enter-to ：2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效（于此同时 v-enter 被删除 ），在 transition/animation 完成之后移除。

4、v-leave ： 类似 v-enter

5、v-leave-active ： 类似 v-enter-active

6、v-leave-to ： 类似 v-enter-to

渐进过渡

====

在 vue 1.x 中：

transition 与 v-for 一起用时可以创建渐进过渡。给过渡元素添加一个特性 stagger、enter-stagger 或 leave-stagger；

详情看官方文档：vue 1.x 渐进过渡

在 vue 2.x 中：

就移除了 stagger ，如果希望在列表渲染中使用渐进过渡，可以通过设置元素的 data-index（或类似属性）来控制时间。

与此同时，vue 2.x 中添加了 <transition-group> 组件用来渲染整个列表，与 <transition> 区分开。

还添加了一个新特性 v-move 用来处理列表的排序过渡效果。这都是与 vue 1.x 不相同的地方

v-el 和 v-ref 合并为一个 ref 属性

===============================

在 vue 1.x 中：

v-el 用来为 DOM 元素注册一个索引，方便通过所属实例的 $els 访问这个元素。

hello

this.$els.msg.textContent // -> ‘hello’

v-ref 用来在父组件上注册一个子组件的索引，便于直接访问。不需要表达式。必须提供参数 id。可以通过父组件的 $refs 对象访问子组件。

// 从父组件访问

this.$refs.child

在 vue 2.x 中：

简单起见，v-el 和 v-ref 合并为一个 ref 属性了，可以在组件实例中通过 $refs 来调用。

详情：vue 1.x 和 vue 2.x 中获取 DOM 的区别

事件处理器

=====

在 vue 1.x 中：

事件处理器，我们使用 events

它是一个对象，键是监听的事件，值是相应的回调。注意这些事件是 Vue 事件而不是 DOM 事件。值也可以是方法的名字。在实例化的过程中，Vue 实例会调用对象的每个键。

var vm = new Vue({

events: {

‘hook:created’: function() {

console.log(‘created’)

}

})

在 vue 2.x 中：

events 选项被弃用。事件处理器现在在 created 钩子中注册。

事件派发与监听

=======

在 vue 1.x 中：

派发事件，使用 $dispatch，首先在实例上触发它，然后沿着父链向上冒泡在触发一个监听器后停止，除非它返回 true。附加参数都会传给监听器回调。

详情：vm.$dispatch

广播事件，使用 $broadcast，通知给当前实例的全部后代。因为后代有多个枝杈，事件将沿着各“路径”通知。每条路径上的通知在触发一个监听器后停止，除非它返回 true 。

详情：vm.$broadcast

在 vue 2.x 中：

$dispatch 和 $broadcast 已经被弃用。对于 $dispatch 和 $broadcast 最简单的升级方式就是：通过使用事件中心（关于事件中心，你可以查看 这篇文章 的最后一段），允许组件自由交流，无论组件处于组件树的哪一层。

当然了，简单的父子组件的相互通信，vue 2.x 给出的直接方案是 v-on 和 v-emit。

当然了，使用更多简明清晰的组件间通信和更好的状态管理方案，Vuex 应该是最好的选择了。

前端面试题汇总

JavaScript

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

性能

linux

前端资料汇总