2024年最全【VUE】vue2(2)，Web前端面试题10道

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

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

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

（4）局部自定义指令

在组件A.vue，用自定义指令实现改变文字颜色

<p v-style>文字描述</p>

 directives: {
    style: {
      bind(el,binding) {
        el.style.fontSize = "30px";
         el.style.color = "blue";
      },
      update(el,binding){
      el.style.fontSize = "30px";
      el.style.color = "blue";
      }
    },
  },

• style：指令的名称，使用的时候要加前面加个v-
• bind：只会调用一次，指令 第一次 绑定到元素时会调用
• el：是指绑定的这个dom元素本身
• binding：获取绑定指令的信息（name：指令名称；rawName：指令全称：value：指定绑定的值）
• update：元素第一次绑定不会触发，绑定的值发生更新触发，参数与binding是相同的，如果逻辑与bind相同的话可以直接把指令当成函数写，上面的指令是对象类型。
• v-style：使用指令改变了元素的样式

（5）全局自定义指令

使用Vue.directive(‘指令名称’,{钩子函数})

• 第一个参数为字符串，指令的名称
• 第二个参数是一个对象，用于接收指令的参数值

Vue.directive('style',{
    bind(el) {
      el.style.fontSize = "30px";
      el.style.color = "blue";
    },
  },
)

（6）简写形式

如果update逻辑与bind相同的话可以直接把指令当成函数写

 directives: {
    style(){
       el.style.fontSize = "30px";
       el.style.color = "blue";
    },
  },

🍔 三、Vue3.x自定义指令钩子函数

（1）指令钩子函数（摘自官网）

const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
}

（2）钩子函数参数

指令的钩子会传递以下几种参数：

• el：指令绑定到的元素。这可以用于直接操作 DOM。
• binding：一个对象，包含以下属性。
  value：传递给指令的值。例如在 v-my-directive=“1 + 1” 中，值是 2。
  oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
  arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 “foo”。
  modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
  instance：使用该指令的组件实例。
  dir：指令的定义对象。
• vnode：代表绑定元素的底层 VNode。
• prevNode：之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

（3）局部注册两种方式

<script lang="ts" setup>
// 局部指令, 变量名为驼峰命名(vFocus = v-focus)
const vFocus = {
  mounted: (el:any) => {
    el.focus()
    console.log(el, '已经自动获得焦点')
  }
}
</script>

<script lang="ts">
const vFocus = {
    focus:  {
        mounted(el:any){
            el.focus();
            console.log(el, "已经自动获得焦点");
        }
    },
};
export default {
    setup() { },
    directives: vFocus,
};
</script>

（4）全局注册

• 组件A.vue

  <input type="text" v-focus>

• 在directives文件夹新建focus.ts文件

const directives: any = {
	mounted(el: any) {
		el.focus();
		el.value = '1'
	}
}
export default {
	name: "focus",
	directives
}

• 在directives文件夹新建index.js

import type { App } from 'vue'
import focus from './focus'
export default function installDirective(app: App) {
    app.directive(focus.name, focus.directives);
} 

• main.ts文件

import directives from './directives'
const app = createApp(App);
app.use(directives);

（5）简化形式

当update和mounted中的函数体一样时，则可以简写成如下：

const directives = (el:any) => {
		el.focus();


#### 专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

* HTML+CSS
* JavaScript
* 前端框架
* 前端性能优化
* 前端监控
* 模块化+项目构建
* 代码管理
* 信息安全
* 网络协议
* 浏览器
* 算法与数据结构
* 团队管理
* **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。



**其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等**

**由于文章篇幅有限，仅展示部分内容**

![](https://img-blog.csdnimg.cn/img_convert/ac0b1c2376da47d727e0dc8a77e76478.png)