vue2面试题

收集vue2面试题

珠峰-2020最全最火Vue面试题训练营

• 这是导师的笔记https://akaileyouyou.gitee.io/jg-vue/vue-apply/note-1.html (opens new window) 左侧导航下有2篇《2020全新 最火Vue面试题训练营》
• 这是README.md是自己做的笔记补充https://gitee.com/wangluoshihuang/everest-series/tree/master/2020-09-03-最全最火Vue面试题训练营 (opens new window)

开课吧2020年vue面试题

• https://gitee.com/wangluoshihuang/kaikeba-2020-vue-interview (opens new window)
  • diff算法：
    • 首先，我们拿到新旧节点的数组，然后初始化四个指针，分别指向新旧节点的开始位置和结束位置，进行两两对比，若是 新的开始节点和旧开始节点相同，则都向后面移动，若是结尾节点相匹配，则都前移指针。若是新开始节点和旧结尾节点匹配上了，则会将旧的结束节点移动到旧的开始节点前。若是旧开始节点和新的结束节点相匹配，则会将旧开始节点移动到旧结束节点的后面。若是上述节点都没配有匹配上，则会进行一个兜底逻辑的判断，判断新开始节点是否在旧节点中，若是存在则复用老节点，若是不存在则创建。最终跳出循环，进行裁剪或者新增，若是旧的开始节点小于旧的结束节点，则会删除之间的节点，反之则是新增新的开始节点到新（作者这里讲的是’新‘，自己认为是’旧‘）的结束节点。

别人收集的

平时收集

• vue2的组件通讯方式：vue中8种组件通信方式, 值得收藏! (opens new window)

  • vue2也给出了刷新页面数据不丢失的组件—数据持久化储存。

  • 通讯还可参考其他2篇文章：

    • https://juejin.cn/post/6884393371591245838#heading-3 (opens new window)
    • https://juejin.cn/post/6844903845642911752 (opens new window)【这个不错】

  • 在掘金小册《Vue.js 组件精讲 (opens new window)》中（UI 组件库 — iView 的作者）也通过$children/$parent遍历的方式去获取组件，就可以解决所有组件通讯问题。书籍和笔记在这里：https://gitee.com/wangluoshihuang/vue-zuJianJingJiang

• 对于 在组件上使用 v-model (opens new window)理解：v-model的原理这里在input元素和组件上分别都讲明了。

  • 参考上面官网的链接，会得到以下代码：

      <custom-input  // 当用在组件上时，v-model 则会这样：
  		v-bind:value="searchText"
  		v-on:input="searchText = $event"  // 这里的$event等于下面的$event.target.value。
      ></custom-input>
      // 在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出
  	Vue.component('custom-input', {  // 组件的具体实现
  		props: ['value'],
    		template: `
    			<input
      			v-bind:value="value"
      			v-on:input="$emit('input', $event.target.value)" // '在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出'---这句话解释为---具体元素上通过$emit触发的事件的参数[这里是$event.target.value]会变为组件上监听这个事件的$event。子组件里触发$emit并有参数时，当前组件上v-model绑定的:value属性的值才会被更新。
  			>
  		`
    })
  
  

• 上面的理解有助于理解事件的 '.sync'修饰符：参考这里 (opens new window)

  • 等价于：

• 自己封装过什么组件?

  • 参考掘金小册组件的封装

• 作用域插槽卡槽的理解：

  • 老版本的写法 (opens new window),但是无论是老版本还是新版本 (opens new window)，他们的作用没有变————子组件把数据给父组件使用。

• keep-alive对应的两个生命周期

  • 参考 (opens new window)

• vuex的理解和使用：

  • 参考 (opens new window)

• 前后端完全分离下Vue Router history模式的实现：

  • https://juejin.cn/post/6844904160475906062 (opens new window)
    • 自己在vue.config.js里配置了publicPath: "./" 解决了history模式 (opens new window)。

• 迅速搞懂Vue路由中hash和history的区别？：

  • https://juejin.cn/post/6971710781398351908 (opens new window)

• 父子组件生命周期：

  • https://juejin.cn/post/6986900588537741342 (opens new window)

• Vue CLI 2&3 下的项目优化实践：CDN + Gzip + Prerender：

  • 参考

• vue2中 beforeCreate 生命周期干什么

  • 在 Vue 2 中，beforeCreate 是组件生命周期钩子中的第一个阶段，它在 Vue 实例初始化之后、数据观测（data）和事件/侦听器配置之前被调用。

    beforeCreate 的特点：

    1. 无法访问数据和方法：
       • 此时实例的 data、computed、methods 等选项还未初始化，访问它们会得到 undefined。
       • this.$data 和 this.$methods 也不可用。
    2. 用途有限但适合特定场景：
       • 通常用于执行一些与实例无关的初始化逻辑（例如插件注入、全局配置检查等）。
       • 如果需要操作数据或方法，应该使用 created 钩子。

  • 常见使用场景：

    • 在插件中注入全局属性或逻辑（例如 Vue Router、Vuex 的初始化）。
    • 执行不依赖组件数据的早期配置（但大多数情况下更推荐用 created）。

• vue2中 created 生命周期干了什么

  • 在 Vue 2 中，created 是组件生命周期的一个重要阶段，它在实例初始化完成、数据观测（data）和事件/侦听器配置之后被调用，但尚未挂载到 DOM 上（即模板还未渲染）。

    created 的主要作用

    1. 数据已初始化
       • 可以访问 data、computed、methods 等选项。
       • this.$data、this.$methods 等已可用。
    2. 未生成 DOM
       • 此时组件的模板（template）还未编译和挂载，无法操作 DOM（如 this.$el 是 undefined）。
    3. 适合异步请求或初始化逻辑
       • 常用于发送 API 请求（因为能拿到数据，且比 mounted 更早执行）。
       • 可在此阶段初始化非 DOM 相关的数据或状态。

  • 常见使用场景

    • 发送 HTTP 请求（如初始化页面数据）。
    • 访问或修改响应式数据（如根据路由参数设置状态）。
    • 初始化第三方库（不依赖 DOM 的情况，例如初始化计时器、全局事件总线）。

  • 注意事项

    • 如果需要操作 DOM，请使用 mounted 钩子。
    • 避免在 created 中执行耗时同步操作，以免阻塞渲染。

    总结：created 是处理数据逻辑的理想时机，尤其适合在组件渲染前获取数据或初始化状态。