面试 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！

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

                 
                 网站制作公司找哪家做  怎样用html制作网站  东莞公司网站怎么做  成都网站建设公司排名  网页做什么主题好  企业网址怎么注册