大三学生面试经历（2）

继续昨天的内容，我面试的是一个Java实习岗，但是居然也问了我前端（vue）相关的问题
最大的感觉就是，现在真的越来越卷了，后端都把前端的东西卷完了，当时是线上面试，感觉答的不太好（因为确实没准备的太全），接下来的时间继续加强加强这些方面的学习

愿与诸君共勉！

具体如下

1.请简述Vue.js的生命周期函数及其执行顺序
2.Vue.js中的v-bind指令和v-model指令有什么区别?
3.请简述Vue.js的组件通信方式及其优缺点。
4.Vue.js如何实现父子组件之间的数据传递?
5.请简述Vue.js中的响应式原理:
6.如何在Vue.js中实现路由跳转?
7.Vue.js中的computed和watch有什么区别?
8.Vue.js中的v-for指令和v-if指令有什么区别?
9.请简述Vue.js中的mixins和extends的作用及其区别。
10.Vue.js中的keep-alive组件有什么作用?如何使用?

个人回答如下，仅供参考：

下面是对你提出的关于Vue.js若干核心概念的详细解答，适合用作博文内容。

1. Vue.js的生命周期函数及其执行顺序

Vue.js的生命周期是指在Vue实例创建、更新和销毁的不同阶段所触发的钩子函数。其执行顺序如下：

1. beforeCreate：实例刚创建，数据观测和事件配置尚未开始。
2. created：实例创建完成，可以访问数据和事件，但DOM尚未生成。
3. beforeMount：在挂载开始之前调用，此时模板编译后的DOM尚未插入到页面中。
4. mounted：挂载完成，可以访问到实际的DOM元素。
5. beforeUpdate：数据改变后，DOM重新渲染之前调用。
6. updated：DOM重新渲染完成后调用。
7. beforeDestroy：实例销毁之前调用，能够清理定时器、解绑事件等。
8. destroyed：实例已经销毁，所有的事件监听器和子实例都被解绑。

2. Vue.js中的v-bind指令和v-model指令的区别

• v-bind：用于动态绑定HTML属性的值，可以绑定任何属性，通过 Vue 表达式计算出结果。例如：<img v-bind:src="imageSrc">。

• v-model：用于实现表单控件的双向数据绑定，能够自动更新数据和相应的UI元素。例如：<input v-model="text">会将文本框的值与Vue实例中的text进行双向绑定。

3. Vue.js的组件通信方式及其优缺点

Vue.js提供了多种组件通信方式，包括：

• Props：通过父组件向子组件传递数据，简单直接，但只适用于父子关系，且数据流向单向。

• $emit：子组件通过事件向父组件传递信息，适合在子组件中通知父组件。

• Event Bus：使用独立的Vue实例作为中央事件总线，适合在不相关的组件之间通信，但可能会导致代码不易维护。

• Vuex：用于状态管理的库，可以让多个组件共享状态，适合中大型应用，但引入及学习成本相对较高。

4. Vue.js如何实现父子组件之间的数据传递

父子组件之间的数据传递主要通过props和 $emit 完成。

• props：父组件可以把数据通过props传递给子组件，子组件可以使用this.$props来访问这些数据。

• $emit：子组件可以使用

  this.$emit('eventName', data);
  
  

来向父组件发送事件，父组件通过监听事件来处理数据和状态更新。

5. Vue.js中的响应式原理

Vue.js的响应式原理基于数据劫持，使用 Object.defineProperty() 对数据对象的属性进行拦截和观察。Vue会为每个数据属性定义getter和setter，当数据改变时，setter被触发，在执行set时，会通知所有依赖这个数据的组件进行重新渲染。

在Vue 3中，响应式原理采用了Proxy来实现，相比于Object.defineProperty，Proxy可以更强大地实现对对象的操作拦截。

6. 如何在Vue.js中实现路由跳转

Vue.js可以通过Vue Router来实现路由管理，通常通过以下方式实现路由跳转：

1. 使用router-link组件：为链接提供响应式支持，例如：<router-link to="/home">Home</router-link>。

2. 使用this.$router.push方法：编程式导航，例如在方法中调用：this.$router.push('/about')，将用户导航到特定路径。

7. Vue.js中的computed和watch的区别

• computed：计算属性，基于其依赖的响应式属性进行缓存，只有在其依赖发生变化时才会重新计算，适合用于模板中的数据处理。

• watch：观察者，监视某个数据属性的变化并执行相应的回调函数，适合处理异步操作或在数据改变时需要执行特定操作的场景。

8. Vue.js中的v-for指令和v-if指令的区别

• v-for：用于循环渲染数组或对象，通常用来生成一组相似的元素，例如：<li v-for="item in items">{{ item }}</li>。

• v-if：用于条件渲染，控制是否渲染某个元素，具有更高的优先级，适合根据条件决定元素在DOM中的存在与否。

9. Vue.js中的mixins和extends的作用及其区别

• mixins：混入，可以把多个组件的公共逻辑提取到一个mixins对象中，任何组件都可以使用它，适合代码复用。

• extends：用于扩展一个基础组件，生成一个新组件，适合于继承单个组件的逻辑。

区别在于mixins可以合并多个对象的功能，而extends则是单一的继承关系。

10. Vue.js中的keep-alive组件有什么作用?如何使用?

keep-alive是一个内置的高阶组件，用于缓存不频繁更新的组件，从而提高性能。其主要作用是避免重新渲染组件，从而保留组件的状态。

使用方法：

<keep-alive>
  <router-view></router-view>
</keep-alive>

通过将<router-view>包裹在<keep-alive>中，能够缓存相应的路由组件。