2024前端开发面试经验—02

1、watch和watchEffect的区别

watch：需要手动指定监听数据，仅在数据发生变化时触发，执行特定的函数。

• 需要显式的指定要监听的数据和回调函数
• 当被监听的数据变化时，vue会自动调用回调函数
• watch有更多的控制选项，例如深度监听、立即执行回调函数、手动停止监听等。

watchEffect：会自动追踪依赖的响应式数据，并在数据变化时执行回调函数。

• 不需要显式的指定要监听的数据，它会自动追踪函数内部使用的响应式数据。
• 由于自动追踪机制，它通常用于处理副作用，例如执行异步操作或者更新UI。

示例:

export default {
  setup() {
    const state = reactive({
      count: 0,
    });
    // 使用 watch 监听 count 的变化
    watch(
      () => state.count,
      (newVal, oldVal) => {
        console.log(`count 变化，新值为 ${newVal}，旧值为 ${oldVal}`);
      }
    );
    // 使用 watchEffect 响应式地追踪 count
    watchEffect(() => {
      state.double = state.count * 2;
    });
    return {
      count: state.count,
      double: state.double,
    };
  },
}; 

PS：如何停止watch?

在vue中，使用watch来侦听数据时，会返回一个停止侦听函数，可以用这个函数来停止侦听。

export default {
  setup() {
    // 定义一个响应式数据
    const count = ref(0);
 
    // 使用watch来侦听count的变化，并保存返回的停止侦听函数
    const stopWatching = watch(count, (newValue, oldValue) => {
      // 这里是当count变化时执行的副作用
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });
    // 当你想停止侦听时，调用stopWatching函数
    stopWatching();
    return {
      count,
    };
  },
};

如何停止watchEffect?

在vue3中，可以使用watchEffect方法来创建一个响应式的副作用函数，如需停止，可以使用stop方法来停止执行。

import { watchEffect, reactive, ref } from 'vue';
const state = reactive({
  count: 0
});
const stop = watchEffect(() => {
  console.log(state.count);
});
// 在某个时刻停止 watchEffect 的执行
stop();

2、vue3中异步加载组件有哪些方法？

Import：使用import表达式来实现异步加载

DefineAsyncComponent:可以懒加载组件，创建一个只有在需要的时候才会加载的异步组件

（感觉不够完善）

3、使用echart做数据大屏，如何实现屏幕适配

1、百分比设置容器大小，通过将图表容器的宽度和高度设置为百分比值；（Echarts5）

2、resize事件监听器，通过监听窗口大小的变化，可以在窗口大小改变时重新设置图表的宽度和高度；

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

// 监听窗口大小变化

window.addEventListener('resize', function() {

    myChart.resize();

});

确保在窗口大小发生变化时调用 myChart.resize() 方法，以便图表能够正确适配新的尺寸。

3、通过响应式布局（flex布局等）。

4、v-show和v-if的区别

都能控制元素在页面是否显示。

控制手段不同：v-show：类似于css属性display-none，dom元素依然存在，只编译一次（不管初始条件是什么，元素总是会被渲染）;

v-if：动态向DOM树添加或删除元素（惰性，只有条件为true时才会渲染）；

编译过程：v-if切换有一个局部编译/卸载过程，切换过程中适当的销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换。

使用场景：

• v-if相比v-show开销更大（直接操作dom元素的添加与删除）
• 如果需要非常频繁的切换，使用v-show比较好
• 如在运行时条件很少改变，使用v-if比较好

附属到组件和普通元素时的情况：

​​​v-show:当v-show指令附属于普通元素或组件时，指令状态变化对本身组件和父组件的生命周期都不会有影响。

v-if:

1. 附属于普通元素时，v-if指令状态变化会使父组件的dom发生变化，父组件将会更新视图，所以会触发父组件的beforeUpdate和update钩子函数。
2. 附属于组件时，v-if指令状态变化，对父组件的影响和上一条一致，但对自己本身组件的生命周期影响如下：

• v-show 由false变为true时，不会触发组件的生命周期
• v-if由false变为true时，触发组件的beforeCreat、create、beforeMount、mounted钩子，由true变为false时触发组件的beforeDestory、destoryed钩子

5、vue3的dom

6、谈谈从0-1创建一个项目

1. 从0到1创建一个项目，我大概会做这些事：项目构建（使用脚手架）、引入比要插件、代码规范、提交规范（没用过可以不说）、常用库和组件
2. 目前vue3项目我会使用vite或者create-vue创建项目
3. 下来引入必要的插件路由插件vue-router、状态管理vuexx、ui库一般用element-ui或者antdesign-vue、http工具我会选axios
4. 其它比较常用的库有vueuse、nprogress等
5. 代码规范一般使用：prettier和esLint
6. 提交规范（略）
7. 目录结构一般有以下习惯：

      plugins：用来放vite插件的plugin配置。

      Public：用来放一些页头icon之类的公共文件，会被打包到dist根目录下。

      Src：用来放项目代码文件。

      Api：用来放http的一些接口配置。

      Assets：用来放一些静态资源。

     Components：用来放项目通用组件。

     Layout：用来放项目布局。

     Router：用来放项目的路由配置。

     Store：用来放状态管理的配置。

     Utils：用来放项目中的工具方法类。

     Views：用来放项目的页面文件。

7、Vue项目权限管理如何做

1.权限管理一般需求是页面权限和按钮权限的管理。
2.具体实现的时候分后端和前端两种方案:
前端方案：会把所有路由信息在前端配置，通过路由守卫要求用户登录，用户登录后根据角色过滤出路由表。比如我会配置一个`asyncRoutes`数组，需要认证的页面在其路由的`meta`中添加一个`roles`字段，等获取用户角色之后取两者的交集，若结果不为空则说明可以访问。此过滤过程结束，剩下的路由就是该用户能访问的页面，最后通过`router.addRoutes(accessRoutes)方式动态添加路由即可。
后端方案：会把所有页面路由信息存在数据库中，用户登录的时候根据其角色查询得到其能访问的所有页面路由信息返回给前端，前端再通过`addRoutes动态添加路由信息
按钮权限的控制通常会实现一个指令，例如`v-permission`，将按钮要求角色通过值传给v-permission指令，在指令的`moutned`钩子中可以判断当前用户角色和按钮是否存在交集，有则保留按钮，无则移除按钮。
纯前端方案的优点是实现简单，不需要额外权限管理页面，但是维护起来问题比较大，有新的页面和角色需求就要修改前端代码重新打包部署;服务端方案就不存在这个问题，通过专门的角色和权限管理页面，配置页面和按钮权限信息到数据库，应用每次登陆时获取的都是最新的路由信息，可谓一劳永逸!