面试 Vue 框架八股文十问十答第八期

面试 Vue 框架八股文十问十答第八期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）vue如何监听对象或者数组某个属性的变化

Vue提供了$watch方法，可以用来监听对象或数组中特定属性的变化。对于对象，可以使用vm.$watch('obj.property', callback)，对于数组，可以使用vm.$watch('array', callback, { deep: true })。此外，Vue 2.6.0+版本还引入了$watchEffect函数，可以直接监听一个响应式对象，并在其依赖发生变化时执行回调。

// 示例：监听对象属性变化
vm.$watch('obj.property', (newValue, oldValue) => {
  // 处理变化
});

// 示例：监听数组变化
vm.$watch('array', (newValue, oldValue) => {
  // 处理变化
}, { deep: true });

2）什么是 mixin ？

   // 示例：定义一个Mixin
   const myMixin = {
     data() {
       return {
         mixinData: 'Hello from Mixin!'
       };
     },
     methods: {
       greet() {
         console.log(this.mixinData);
       }
     }
   };

   // 在组件中使用Mixin
   export default {
     mixins: [myMixin],
     created() {
       this.greet(); // 调用Mixin中的方法
     }
   };

3）Vue模版编译原理

Vue模版编译的主要步骤包括：

• 解析： 将模版字符串解析成抽象语法树（AST）。
• 优化： 对AST进行优化，标记静态节点以提高渲染性能。
• 代码生成： 根据优化后的AST生成渲染函数。
• 渲染： 执行渲染函数，生成虚拟DOM，并将其渲染到页面上。

4）对SSR的理解

服务器端渲染（SSR）是一种在服务器端将Vue组件渲染成HTML字符串，然后将其发送到客户端的技术。与传统的客户端渲染（CSR）相比，SSR具有以下优势：

• SEO优化： 搜索引擎能够更好地索引页面内容。
• 首屏加载性能： 用户首次访问时，服务器端可以直接返回渲染好的HTML，减少客户端渲染的时间。
• 更好的用户体验： 在一些情况下，服务器端渲染可以提供更快的页面加载速度。

5）Vue的性能优化有哪些

• 虚拟DOM： Vue使用虚拟DOM进行DOM操作，通过比对前后两个虚拟DOM树的差异，最小化DOM操作，提高性能。
• 列表性能优化： 使用v-for时，为每项元素添加唯一的key，避免不必要的DOM更新。
• 异步组件： 利用Vue的异步组件特性，将一些不太常用的组件进行按需加载。
• 合理使用v-if和v-show： v-if适用于频繁切换条件的场景，而v-show适用于条件不经常改变的场景。
• 性能检测和优化工具： 使用Vue Devtools等工具来检测性能瓶颈，并进行相应的优化。
• 服务端渲染（SSR）： 对于需要SEO优化和更好首屏加载性能的应用，考虑使用服务器端渲染。
• 懒加载： 图片、组件等懒加载可以减少初始加载时的资源压力。

6）对 SPA 单页面的理解，它的优缺点分别是什么？

• 理解： SPA是一种Web应用程序架构，它通过动态加载页面的方式，将所有相关的资源（HTML、CSS、JavaScript等）一次性加载到浏览器，之后通过Ajax等技术动态地更新页面内容，实现无需刷新页面的交互。
• 优点：
  • 流畅的用户体验： 避免了整页刷新，提供了更流畅的用户体验。
  • 前后端分离： 前端负责UI和用户交互，后端负责数据处理，实现了前后端分离。
  • 更好的性能： 可以通过局部刷新、异步加载等技术提高性能。
• 缺点：
  • 首次加载耗时： 首次加载需要下载所有前端资源，可能导致较长的等待时间。
  • SEO难度： 对搜索引擎优化较为复杂，因为页面内容大部分是通过JavaScript动态生成的。
  • 浏览器历史管理： 回退、前进等浏览器操作可能需要特殊处理。
  • 资源管理： 需要额外处理前端资源的加载、缓存等问题。

7）template和jsx的有什么分别？

1. • Template：

     • 语法： 使用HTML-like的模版语法。

     • 优势： 相对于JSX更容易理解，更接近HTML。

     • 示例：

       render() {
         return 
{this.state.message}
;
       }
       

• 区别： 主要体现在语法风格上，选择使用哪种方式取决于个人或团队的偏好以及项目需求。Vue通常使用template，而React通常使用JSX。

8）vue初始化页面闪动问题

• 问题描述： 当Vue应用初始化时，有时会出现页面闪动的情况，即在页面加载完成之前，用户可能会看到未经Vue处理的模版内容。

• 解决方案： 使用v-cloak指令可以解决这个问题。在样式中定义[v-cloak]属性，然后在包含Vue模版的元素上使用v-cloak指令，确保Vue初始化完成后再显示该元素。

9）extend 有什么作用

- 在Vue中，`extend`是用来创建一个派生的Vue构造器的方法。通过`Vue.extend(options)`，可以基于现有的Vue构造器创建一个新的子类。

   - **作用：**
     - 用于创建可复用的组件构造器。
     - 可以扩展已有的组件，添加新的功能或修改现有功能。

   - **示例：**

     // 创建一个新的Vue构造器
     const MyComponent = Vue.extend({
       template: '
{{ message }}
',
       data() {
         return {
           message: 'Hello from extended component!'
         };
       }
     });

     // 创建MyComponent的实例
     new MyComponent().$mount('#app');

10）MVVM 的优缺点?

1. • 优点：
     • 数据驱动视图： 数据变化会自动更新视图，减少了手动操作DOM的复杂性。
     • 模块化： 基于组件化的思想，提高了代码的可维护性和复用性。
     • 双向绑定： 实现了数据的双向绑定，简化了数据和视图之间的同步。
     • 分工明确： 分离了视图逻辑和业务逻辑，使代码更清晰。
   • 缺点：
     • 学习成本： 对于初学者，理解MVVM框架的概念和使用方法可能需要一定的学习成本。
     • 性能开销： 双向绑定和虚拟DOM等特性可能引起一定的性能开销，尤其是在大型应用中。
     • 项目体积： 引入MVVM框架可能会增加项目的体积。
     • 不适用所有场景： 对于一些简单的应用，引入MVVM框架可能显得过于重量级。需要根据项目实际情况进行选择。### 11）Vue中的路由导航钩子有哪些，它们分别在什么时机被调用？

在Vue中，路由导航钩子是一组函数，用于在导航过程中对路由进行控制或处理。以下是Vue中常用的路由导航钩子及其调用时机：

1. 全局前置守卫 (beforeEach)：

   • 调用时机： 在路由切换开始时触发，可以用于进行全局的前置处理。

   • 使用示例：

     router.beforeEach((to, from, next) => {
       // 在路由切换前执行的逻辑
       next(); // 执行下一步
     });
     

2. **全局解析守卫 (`beforeResolve`)：**
   - **调用时机：** 在全局前置守卫执行完毕后，被激活的组件内的守卫和异步路由组件被解析之后触发。
   - **使用示例：**

     router.beforeResolve((to, from, next) => {
       // 在全局解析守卫中执行的逻辑
       next(); // 执行下一步
     });
     

1. 全局后置钩子 (afterEach)：

   • 调用时机： 在路由切换完成后（即导航成功或失败）触发。

   • 使用示例：

     router.afterEach((to, from) => {
       // 在路由切换完成后执行的逻辑
     });
     

4. **路由独享守卫 (`beforeEnter`)：**
   - **调用时机：** 在单个路由配置中定义，在路由进入前触发。
   - **使用示例：**

     const route = {
       path: '/example',
       component: Example,
       beforeEnter: (to, from, next) => {
         // 在路由进入前执行的逻辑
         next(); // 执行下一步
       }
     };
     

1. 组件内的守卫：

   • 包括 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。

   • 调用时机：

     • beforeRouteEnter：在路由进入前，组件还未创建，因此无法访问组件实例。
     • beforeRouteUpdate：在当前路由被复用时调用，可以访问组件实例。
     • beforeRouteLeave：在路由离开前触发，可以访问组件实例。

   • 使用示例：

     const component = {
       beforeRouteEnter(to, from, next) {
         // 在路由进入前执行的逻辑，无法访问组件实例
         next(); // 执行下一步
       },
       beforeRouteUpdate(to, from, next) {
         // 在路由更新时执行的逻辑，可以访问组件实例
         next(); // 执行下一步
       },
       beforeRouteLeave(to, from, next) {
         // 在路由离开前执行的逻辑，可以访问组件实例
         next(); // 执行下一步
       }
     };
     

这些路由导航钩子允许开发者在不同的阶段对路由进行控制和处理，使得在路由切换过程中能够执行特定的逻辑。

开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star！

⭐点赞⭐收藏⭐不迷路！⭐