Vue面试题详解(2)


2020/3/14 Vue

# 1. v-for中为什么要用key(图解)?

# 2. 描述组件渲染和更新的过程

理解:

  • 渲染组件时,会通过 Vue.extend 方法构建子组件的构造函数,并进行实例化。最终手动调用 $mount() 进行挂载。
  • 更新组件时会进行 patchVnode 流程.核心就是diff算法

# 3. 组件中的data为什么是一个函数?

理解

  • 同一个组件被复用多次,会创建多个实例。这些实例用的是同一个构造函数,如果 data 是一个对象的 话。那么所有组件都共享了同一个对象。
  • 为了保证组件的数据独立性要求每个组件必须通过 data 函数 返回一个对象作为组件的状态。
  • 一个组件被使用多次,用的都是同一个构造函数。为了保证组件的不同的实例data不冲突,要求 data必须是一个函数,这样组件间不会相互影响

原理:

# 4. vue中事件绑定的原理

vue中有两种事件:

  • 原生的事件绑定
  • 组件的事件绑定

理解:

  • 原生 dom 事件的绑定,采用的是 addEventListener 实现
  • 组件绑定事件采用的是 $on 方法

原理:core/global-api/extend.js line:33

# 5. v-model中的实现原理及如何自定义v-model

  • v-model 可以看成是 value+input方法 的语法糖:input v-model checkbox v-model select v-model
  • 组件的v-model 就是value+input的语法糖
  • 自定义:
    Vue.component('el-checkbox',{
    template:`<input type="checkbox" :checked="check"
    @change="$emit('change',$event.target.checked)">`, model:{
    prop:'check', // 更改默认的value的名字
    event:'change' // 更改默认的方法名 },
        props: {
            check: Boolean
    }, })
    
    1
    2
    3
    4
    5
    6
    7
    8

# 6. vue中v-html会导致哪些问题?

理解:

  • 可能会导致 xss 攻击
  • v-html 会替换掉标签内部的子元素
let template = require('vue-template-compiler');
let r = template.compile(`<div v-html="'<span>hello</span>'"></div>`)
// with(this){return _c('div',{domProps: {"innerHTML":_s('<span>hello</span>')}})}
console.log(r.render);
// _c 定义在core/instance/render.js
// _s 定义在core/instance/render-helpers/index,js
if (key === 'textContent' || key === 'innerHTML') {
  if (vnode.children) vnode.children.length = 0
  if (cur === oldProps[key]) continue
  // #6601 work around Chrome version <= 55 bug where single textNode 
  //  replaced by innerHTML/textContent retains its parentNode property 
  if (elm.childNodes.length === 1) {
   elm.removeChild(elm.childNodes[0])
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 7. vue中父子组件生命周期调用的顺序

  • 加载渲染过程:父bC 父c 父bM 子bc 子c 子bM 子m 父m
  • 子组件更新:父bU 子bU 子u 父u
  • 父组件更新过程:父bU 父u
  • 销毁过程:父bD 子bD 子d 父d

理解:

  • 组件的调用顺序是先父后子,渲染完成的顺序先子后父
  • 组件的销毁先父后子,销毁完成是先子后父

# 8. vue组件如何通信?单向数据流

  • 父子间通信 父->子通过props、子->父$on、$emit(发布订阅)
  • 获取父子组件实例的方式 $parent、$children 在父组件中提供数据子组件进行消费 Provide、inject 插件
  • Ref 获取实例的方式调用组件的属性或者方法
  • Event Bus 实现跨组件通信 Vue.prototype.$bus = new Vue
  • Vuex状态管理实现通信 $attrs $listeners

# 9.vue中相同逻辑如何抽离

  • vue.mixin 用法 给组件每个生命周期,函数等都混入一些公共逻辑
Vue.mixin = function (mixin: Object) {
this.options = mergeOptions(this.options, mixin); // 将当前定义的属性合并到每个组件中
return this
}
export function mergeOptions (
  parent: Object,
  child: Object,
  vm?: Component
): Object {
  if (!child._base) {
    if (child.extends) { // 递归合并extends
      parent = mergeOptions(parent, child.extends, vm)
    }
    if (child.mixins) { // 递归合并mixin
      for (let i = 0, l = child.mixins.length; i < l; i++) { 
        parent = mergeOptions(parent, child.mixins[i], vm)
      } 
    }
  }
  const options = {} // 属性及生命周期的合并 let key
  for (key in parent) {
      mergeField(key)
  }
  for (key in child) {
    if (!hasOwn(parent, key)) {
      mergeField(key)
    }
  }
  function mergeField (key) {
    const strat = strats[key] || defaultStrat
    // 调用不同属性合并策略进行合并
    options[key] = strat(parent[key], child[key], vm, key)
  }
  return options
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# 10.为什么要使用异步组件?

  • 如果组件功能多打包出的结果会变大,我可以采用异步的方式来加载组件。主要依赖 import() 这 个语法,可以实现文件的分割加载。
    components:{ AddCustomerSchedule:(resolve)=>import("../components/AddCustomer") //
    require([])
    }
    
    1
    2
    3

# 11.什么是作用域插槽?

插槽:

  • 创建组件虚拟节点时,会将组件的儿子的虚拟节点保存起来。当初始化组件时,通过插槽属性将儿子进行分类 {a:[vnode],b[vnode]}
  • 渲染组件时会拿对应的slot属性的节点进行替换操作。(插槽的作用域为父组件)

作用域插槽

  • 作用域插槽在解析的时候,不会作为组件的孩子节点。会解析成函数,当子组件渲染时,会调用此 函数进行渲染。(插槽的作用域为子组件)

# 12. 谈谈你对 keep-alive 的了解?

  • keep-alive实现组件的缓存,当组件切换时不会当前组件进行写在,常用的2个属性
  • incude / exclude ,2个生命周期 actived 和 deacivated LRU算法。

# 13. vue中常见性能优化

  • 编码优化:
    • 不要将所有的数据都放在data中,data中的数据都会增加getter和setter,会收集对应的 watcher
    • vue 在 v-for 时给每项元素绑定事件需要用事件代理
    • SPA 页面采用keep-alive缓存组件
    • 拆分组件( 提高复用性、增加代码的可维护性,减少不必要的渲染 )
    • v-if 当值为false时内部指令不会执行,具有阻断功能,很多情况下使用v-if替代v-show
    • key 保证唯一性 ( 默认 vue 会采用就地复用策略 )
    • Object.freeze 冻结数据
    • 合理使用路由懒加载、异步组件
    • 尽量采用runtime运行时版本
    • 数据持久化的问题 (防抖、节流)
  • vue加载性能优化
    • 第三方模块按需导入 babel-plugin-compoent
    • 滚动到可视区域动态加载
      • https://tangbc.github.io/vue-virtual-scroll-list/
    • 图片懒加载 https://github.com/hilongjw/vue-lazyload.git
  • 用户体验
    • app-skeleton 骨架屏
    • app-shell app壳
    • pwa serviceworker
  • seo优化
    • 预渲染插件 prerender-spa-plugin
    • 服务端渲染 ssr
  • 打包优化
    • 使用cdn的方式加载第三方模块
    • 多线程打包 happypack
    • splitChunks 抽离公共组件
    • sourceMap生成
  • 压缩、缓存
    • 客户端缓存、服务端缓存
    • 服务端gzip压缩

# 14. vue3.0你知道有哪些改进?

  • vue3采用ts来编写
  • 支持 composition API
  • vue3中采用的响应式改成了proxy
  • vdom对比方法更新,只更新vdom的绑定了动态数据的部分

# 15. 实现 路由和 路由

  • onhashchange #
  • history.pushState h5 api

# 16. vue-router中导航守卫有哪些?

完整的导航解析流程(runqueue)

  1. 导航被触发。
  2. 在失活的组件里调用离开守卫。
  3. 调用全局的 beforeEach 守卫。
  4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  5. 在路由配置里调用 beforeEnter 。
  6. 解析异步路由组件。
  7. 在被激活的组件里调用 beforeRouteEnter 。
  8. 调用全局的 beforeResolve 守卫 (2.5+)。
  9. 导航被确认。
  10. 调用全局的 afterEach 钩子。
  11. 触发 DOM 更新。
  12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

# 17. action和mutation的区别

  • mutation 同步更新数据(内部会进行是否为异步更新数据的检测),$watch严格模式下会报错
  • action 异步操作,可获取数据后调用mutation提交最终数据

# 18. 简述vuex工作原理

# 其他

  1. 双向绑定和 vuex 是否冲突?
  2. Vue 中内置组件transition、transition-group 的源码实现原理? 3.说说patch函数里做了啥?
  3. 知道 vue 生命周期内部怎么实现的么 ?
  4. ssr 项目如果并发很大服务器性能怎么优化? 6.说下项目中怎么实现权限校验?
  5. 讲 vue-lazyloader 的原理,手写伪代码?
  6. Vue.set 的原理?
  7. vue compile 过程详细说一下,指令、插值表达式等 vue 语法如何生效的?
asphyxia
逆时针向