记录第一次前端面试~

张张hhh

已于 2022-04-10 22:22:51 修改

阅读量550

点赞数 1

文章标签： javascript 前端前端框架

于 2022-04-07 23:18:49 首次发布

本文链接：https://blog.csdn.net/weixin_45830165/article/details/124027760

版权

本文记录了一次技术面试的经历，面试中涉及了面向对象与面向过程的区别、JavaScript监听input值变化的方法以及Vue组件传值的方式。面试官以友好和耐心的方式引导，尽管回答不够理想，但收获颇丰，认识到自身基础与心态调整的重要性。

摘要由CSDN通过智能技术生成

记录我的第一次面试~

晚上面试用的腾讯会议，刚开始面试官让我自我介绍，然后就开始跟我聊天（估计是为了让我放轻松），问我一些英语口语以及比赛方面的问题，然后开始进入正题：

第一题问的是：面向对象和面向过程的区别:

我只答出来了封装，（当时确实很紧张，脑子里只记得面向对象有封装的特性，其他一片空白呜呜），但是面试官人特别好，给我举了包饺子的例子让我体会面向对象和面向过程的区别，虽然后面我还是没答出来TAT
答案： 因为面向对象有封装、继承、多态的特性，所以使系统更加灵活，更加易于维护，但是在性能上，因为类调用需要实例化，开销比较大，所以面向对象的性能比面向过程低，因此如果性能成为比较重要的因素时，应该采用面向过程开发，但是面向过程没有面向对象易维护，易复用，易拓展。

第二题问的是：用原生js怎么判断input标签的值的变化:

这个也不会，只知道怎么获取input的值，然后我提了vue里面的v-modle，可以获取input的值，通过数据双向绑定；然后面试官让我说一下数据双向绑定，我就说了，但是我感觉答的不是很好，有个点说错了（害，感觉给自己挖坑了），不过面试官有提示我。
答案：

onchange 监听 input 值变化
a）当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）
b）当前对象失去焦点(onblur)；

inputs.onchange = function(){
	console.log(inputs.value);
}

运行结果：只有对象失去焦点时，才会打印input的值
在这里插入图片描述

onpropertychange 监听 input 值变化

只要当前对象属性发生改变，都会触发事件，但是它是IE专属的；

inputs.onpropertychange = function(){
	console.log(inputs.value);
}

    运行结果：![在这里插入图片描述](https://img-blog.csdnimg.cn/e3dbcab1cd4d47a981a27000dc6bb035.png)

在这里插入图片描述

oninput 监听 input 值变化

是onpropertychange的非IE浏览器版本，支持firefox和opera等浏览器，但有一点不同，它绑定于对象时，并非该对象所有属性改变都能触发事件，它只在对象value值发生改变时奏效。

inputs.oninput = function(){
	console.log(inputs.value);
}

运行结果：
在这里插入图片描述

第三题问的是：vue组件传值方式有哪些；

这道题刚开始我太紧张了，没听清面试官问的啥（TAT），然后想了好久，当面试官让我说vue有哪些组件时，我才意识到他问的啥（太尴尬了，救命），然后才答出来。但是也答的磕磕绊绊（我怀疑面试官内心OS：我好急，这人是来搞笑的？）由于我当时答的不全面，所以还是来记录一下。
答案：
1、父组件向子组件传值（用props）
2、子组件向父组件传值使用（$emit+事件）
3、使用 $parent 和 $children 获取到父组件和子组件实例，其中 $parent 表示当前组件树的根 vue 实例， $children 表示当前实例的直接子组件（不保证顺序，使用一个数组配合 v-for 来生成子组件）
4、使用 vuex 进行状态管理
5、使用 bus 总线传递
6、使用路由传参*
后面面试官就没有再问题目了，就开始拉着我聊天，估计是看我太菜了，而且还很搞笑（呜呜呜~），感觉全程我都在尬笑，害，还是自己基础不行，然后心态调整的不太好，容易紧张，希望下次面试可以注意到这些问题。不过还是很感谢面试官，全程都是笑着跟我说话，并且很耐心的在引导我，虽然我还是没答出来，甚至有点搞笑（救命)，然后就是要吸取这次面试的经验，巩固基础，继续努力。