2024年《Vue3》基础知识，2024年最新社招常见面试问题及答案

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

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

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。

//导出，供模版使用

return { …toRefs(data)};

},

methods: {

handleClick() {

console.log(this.age);

}

},

computed: {

computedAge() {

return 12;

}

}

};

例子中直接打印props上的msg是可以获取到父组件传递过来的值的，另外props中的值是只读的，只允许读，不可以改；

context

这个就是变相代替this的变量，上文说过setup中没有this的，如果确实需要在setup中使用this，比如向父级传递一个消息，那么就可以使用context代替，比如

import { watch } from “vue”;

export default {

setup(props, context) {

watch(

() => data.age,

(newTitle, oldTitle) => {

console.log(newTitle, oldTitle);

context.emit(“handle”, 1);

}

);

//导出，供模版使用

return { };

}

};

这里就是监听了一个名为data.age的属性，一旦这个属性发生变化，就向父级传递一个handle方法

data函数

---

在Vue2的版本中，data函数是具有响应式的变量存储的地方，使用方式如下：

data(){

return {

name:“oliver”

}

}

如果在compositionAPI的书写方式，也就是setup中书写则需要改成

{{name}}:{{age}}

如果通过打印name和age，就可以发现，age和name是一个对象，我们定义的值都是保存在其名为value的属性上

methods的使用

---

在Vue2中methods是定义事件的地方，本组件内所有事件都是定义在methods里的，比如

export default {

methods: {

handleClick() {

console.log(this.name);

}

}

};

如果在compositionAPI的书写方式，也就是setup中书写则需要改成

{{name}}:{{age}}

<button @click=“handlePlus”>点击+1

<button @click=“handleClick”>点击

从代码可以看到，方法的定义和在js中定义function没有生命区别，直接定义就可，唯一的区别在于必须导出才可以在模版中使用；

另外，如果需要对定义的响应式变量进行操作，也就是代码里的age进行自增，不能是age++，因为age并不是一个数字，而是Vue3创建的一个响应式对象，如果要对其值进行改变，修改的应该使其的value值，也就是代码示例中的age.value++；

computed计算属性

---

在Vue2中，通常定义一个计算属性的方式如下：

export default {

computed: {

computedAge() {

return 12;

}

}

};

同样，计算属性也是可以定义在setup函数中的，如果在compositionAPI的书写方式，也就是setup中书写则需要改成

<button @click=“handleAge(-1)”>点击-1

{{name}}:{{age}}:{{computedAge}}

<button @click=“handleAge(1)”>点击+1

<button @click=“handleClick”>点击

出生日期:{{year}}

在setup中计算属性是通过Vue3新增的computed方法定义的，接收一个函数作为参数，其返回值就是计算属性的值，同样，如果打印这个计算属性，也就是例子中的year，可以看出它是一个对象，值同样也是保存在value属性上的，因此在模版中的使用其实Vue也是和data一样，读取的是其value的值；

那么，新问题来了，如果想要修改computed属性，也就是需要设置计算属性的setter和getter，该怎么设置，比如，给例子的出生日期增加事件，修改出生日期的同时也能修改年纪；

<button @click=“handleAge(-1)”>点击-1

{{name}}:{{age}}:{{computedAge}}

<button @click=“handleAge(1)”>点击+1

<button @click=“handleClick”>点击

<button @click=“handleYear(1)”>点击+1

出生日期:{{year}}

<button @click=“handleYear(1)”>点击+1

响应式对象

---

从上面例子中可以看出，在setup中对于响应式变量的获取是通过xxx.value获取，之后需要return返回，那么问题就来了，如果一个组件内的值很多，此时return就会变得非常庞大；

因此，Vue3提供了一个新的函数，允许使用者定义一个响应式的对象，最后只需要返回这个响应式对象就可以了

<button @click=“handleAge(-1)”>点击-1

{{data.name}}:{{data.age}}:{{computedAge}}

<button @click=“handleAge(1)”>点击+1

<button @click=“handleClick”>点击

<button @click=“handleYear(1)”>点击+1

出生日期:{{data.year}}

<button @click=“handleYear(1)”>点击+1

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

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

件

function handleYear(value) {

data.year = data.year + value;

}

//导出，供模版使用

return { data, handleYear, handleAge };

},

methods: {

handleClick() {

console.log(this.age);

}

},

computed: {

computedAge() {

return 12;

}

}

};

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

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

[外链图片转存中…(img-cZLInXKJ-1715473531109)]
[外链图片转存中…(img-Ra8Qfy77-1715473531110)]