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

发布时间:2024年01月22日

面试 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-ifv-show v-if适用于频繁切换条件的场景,而v-show适用于条件不经常改变的场景。
  • 性能检测和优化工具: 使用Vue Devtools等工具来检测性能瓶颈,并进行相应的优化。
  • 服务端渲染(SSR): 对于需要SEO优化和更好首屏加载性能的应用,考虑使用服务器端渲染。
  • 懒加载: 图片、组件等懒加载可以减少初始加载时的资源压力。

6)对 SPA 单页面的理解,它的优缺点分别是什么?

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

7)template和jsx的有什么分别?

    • Template:

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

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

      • 示例:

        <template>
          <div>{{ message }}</div>
        </template>
        
       render() {
         return <div>{this.state.message}</div>;
       }
       
  • 区别: 主要体现在语法风格上,选择使用哪种方式取决于个人或团队的偏好以及项目需求。Vue通常使用template,而React通常使用JSX。

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

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

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

    <style>
      [v-cloak] {
        display: none;
      }
    </style>
    
    <div v-cloak>
      <!-- Vue 模版内容 -->
    </div>
    

9)extend 有什么作用

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

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

   - **示例:**

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

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

10)MVVM 的优缺点?

    • 优点:
      • 数据驱动视图: 数据变化会自动更新视图,减少了手动操作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. 组件内的守卫:

    • 包括 beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave

    • 调用时机:

      • 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!

?点赞?收藏?不迷路!?

文章来源:https://blog.csdn.net/qq_67358181/article/details/135744926
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。