2024前端高频面试题之--VUE篇

vue的生命周期及其用处

beforeCreate

是new Vue()之后触发的第一个钩子，在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。

created

在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数。可以做一些初始数据的获取，在当前阶段无法与Dom进行交互，如果非要想，可以通过vm.$nextTick来访问Dom。

beforeMount

发生在挂载之前，在这之前template模板已导入渲染函数编译。而当前阶段虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated。

mounted

在挂载完成后发生，在当前阶段，真实的Dom挂载完毕，数据完成双向绑定，可以访问到Dom节点，使用$refs属性对Dom进行操作。

beforeUpdate

发生在更新之前，也就是响应式数据发生更新，虚拟dom重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重渲染。

updated

发生在更新完成之后，当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新。

beforeDestroy

发生在实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器。

destroyed

发生在实例销毁之后，这个时候只剩下了dom空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。

响应式原理是什么

Vue在初始化数据时，会使用

Object.defineProperty

重新定义data中的所有属性，当页面使用对应属性时，首先会进行依赖收集(收集当前组件的

watcher

)如果属性发生变化会通知相关依赖进行更新操作(

发布订阅

)。

Vue3.x改用

Proxy

替代Object.defineProperty。因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。

vue2和vue3的区别

Vue.js 是一个流行的 JavaScript 框架，用于构建用户界面和单页应用程序。Vue 3 在 Vue 2 的基础上进行了许多改进和新特性引入。以下是 Vue 2 和 Vue 3 之间的一些主要区别：

1. Composition API

• Vue 2：使用 Options API，组件的逻辑通过 data、methods、computed 等选项来组织。
• Vue 3：引入了 Composition API，使得组件的逻辑可以通过函数组合的方式进行组织。这种方式更灵活，便于复用逻辑。

 // Vue 2
 export default {
   data() {
     return {
       count: 0
     };
   },
   methods: {
     increment() {
       this.count++;
     }
   }
 }

// Vue 3
 import { ref } from 'vue';

export default {
   setup() {
     const count = ref(0);
     const increment = () => {
       count.value++;
     };
     return { count, increment };
   }
 }

2. 响应式系统

• Vue 2：使用 Object.defineProperty() 实现响应式，性能较低，尤其在处理大量数据时。
• Vue 3：使用 Proxy 对象实现响应式，性能更好，并且能够更好地支持数组和对象的变化。

3. 性能提升

• Vue 3：相较于 Vue 2，Vue 3 在性能上有显著提升，包括更快的虚拟 DOM 渲染和更小的打包体积。

4. Fragment 支持

• Vue 2：每个组件必须有一个根元素。
• Vue 3：支持 Fragment，允许组件返回多个根节点，从而减少不必要的嵌套。

 <!-- Vue 3 -->
 <template>
   <h1>Hello</h1>
   <p>World</p>
 </template>

5. Teleport

• Vue 3：引入了 Teleport 组件，允许将子组件渲染到 DOM 中的不同位置，适用于模态框、通知等场景。

 <teleport to="body">
   <div class="modal">This is a modal!</div>
 </teleport>

6. Suspense

• Vue 3：引入了 Suspense 组件，支持异步组件加载，可以在等待异步操作完成时显示占位符。

 <suspense>
   <template #default>
     <AsyncComponent />
   </template>
   <template #fallback>
     <LoadingSpinner />
   </template>
 </suspense>

7. TypeScript 支持

• Vue 2：对 TypeScript 的支持有限。
• Vue 3：对 TypeScript 提供了更好的支持，类型定义更加完善，使得开发者可以更容易地使用 TypeScript 开发 Vue 应用。

8. 全局 API 改变

• Vue 2：全局 API（如 Vue.use()、Vue.component()）直接在 Vue 对象上调用。
• Vue 3：全局 API 被移到了应用实例上，需要通过 createApp() 创建应用实例后再使用。

 // Vue 2
 Vue.component('my-component', { /* ... */ });

// Vue 3
 const app = createApp(App);
 app.component('my-component', { /* ... */ });

9. 自定义指令

• Vue 2：自定义指令的使用和定义方式。
• Vue 3：简化了自定义指令的 API，提供了更好的钩子函数支持。

总结

Vue 3 引入了许多新特性和改进，使得开发体验更加灵活和高效，同时提高了性能和可维护性。虽然 Vue 2 仍然被广泛使用，但推荐新项目使用 Vue 3，以充分利用其新特性和优势。如果您有其他问题或需要更详细的解释，请告诉我！