面试题

VUE

1.vue的createRouter插件有什么用？

全局注册RouterLink和RouterView组件,添加全局$router $route属性，启用useRouter和useRoute组合式函数

2 v-show v-if

v-show和v-if的区别是什么
两者都能对组件进行显隐操作，v-show会渲染相应的元素，通过css的display属性来动态控制显隐。v-if只当条件为true时才渲染元素。对于频繁操作的dom例如标签选项卡，用v-show可以减少创建和销毁元素的开销。对于初始条件确定的，或者时复杂的组件用v-if。

为什么v-for需要用key?

v-for中使用 key，是为了给 Vue 的虚拟 DOM diff算法提供一个稳定的标识，让 Vue 能够准确地追踪每个列表项的身份。当列表发生变化时（如插入、删除、排序），Vue 可以通过 key判断哪些节点可以复用、哪些需要移动、哪些需要更新或销毁，从而避免不必要的DOM 操作，提升性能，并防止组件状态错乱。
如果不提供key，或者使用不稳定的 key（如数组索引），Vue 会采用“就地复用”策略，可能导致渲染结果错误或性能下降。

axios promise async await

JS

箭头函数

箭头函数不会创建自己的 this，而是继承外层作用域的 this
vue2中代码如下：
async initForm() { console.log("outer this:", this); // Vue 实例 Promise.resolve({ data: [] }).then((resp) => { console.log("arrow function this:", this); // 仍然是 Vue 实例！ // 所以可以直接调用 this.method(), this.data 等 }); Promise.resolve({ data: [] }).then(function (resp) { console.log(this); // ❌ undefined（严格模式）或 window（非严格） }); },

在vue2中methods是如何绑定this的？
vue会遍历methods对象,根据key取出方法methodHandler,将它绑定到publicThis上。它返回的是ctx[key]方法，在组件上使用的@click='***'方法，实际上使用的是ctx[key]，这种绑定了publicThis组件实例的代理对象的方法,publicThis实际上是instance.Proxy