interview vue 题目

Vue 组件如何通讯
1. 父子组件props 和 this.$emit
2. 自定义事件event.$no event.$off event.$emit
3. Vex

Vue 组件生命周期（父子组件）

加载渲染过程
　　父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子组件更新过程
　　父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程
　　父beforeUpdate->父updated
销毁过程
　　父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

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

v-model的实现原理
1. input元素的value=this.name
2. 绑定input事件this.name = $event.target.value
3. data更新触发re-render
对MVVM的理解
computed有什么特点
1. 会存在缓存,如果数据没有发生变化会使用缓存里的数据
为何data必须是一个函数
1. vue组件化定义的vue文件,实际上会变成一个类,在使用时相对于实例化;在函数中时,数据在闭包中,不会污染
ajax 请求应该放在那个生命周期
1. mounted
2. js是单线程的,ajax异步获取数据
3. 放在mounted之前的生命周期没有用,只会让逻辑混乱
如何将组件所有props传递给子组件
1. $props
  1
  <User v-bind='$props' />
如何自定义组件实现v-model(设计一个获取颜色的组件)

多个组件相同逻辑抽离

1. mixin 缺点较为明显,vue3 已经废弃

何时用异步组件

1. 加载大组件
2. 路由异步加载
3. 导入的时候使用import,单独打包一个js,用到才回去加载

何时使用keep-alive (性能优化)

1. 缓存组件,不需要重复渲染
   1. 例如多个静态tab页的切换
   2. 列表页到详情页跳转记录浏览位置

何时需要使用beforeDestroy

1. 解绑自定义事件event.$off

2. 清楚定时器

3. 解绑自定义DOM事件,如Windows scroll

   **以上都是为了防止内存泄漏**

什么是作用域插槽

1. 父组件使用定义子组件的插槽中的数据,可以通过作用域插槽获取到

vuex 中action和mutation 有何区别

1. action中处理异步,mutation不可以
2. mutation一般做原子操作
3. action可以整合多个mutation

vue-router 常用的路由模式

1. hash 默认,通过监听 windows.ohashchange 来实现
   1. to-b 的系统推荐hash 简单实用
   2. 完全由前端控制,不会传到后端
2. H5 history ,通过history.pushState 和 Windows.onpopstate
   1. to-c 的系统，可以选择h5history，但需要服务端支持

如何配置vue-router 异步加载

1. 通过()=>import(组件) 导入,而不是直接静态导入

用vnode描述一个dom结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  tag:'div',
    props:{
      className:'container',
        id:'div1'
    },
    children:[
          {
              tag:'p',
              props:{
                className:'content',
                id:'p1'
                style:'color:red;font-size:20px'
              },
    			},
    ]
}

监听data变化的核心API是什么

1. object.defineProperty
2. 深度监听对象:使用递归
3. 深度监听素组:在Array的原型上写一个新的原型,拦截对应的方法,再将这个原型设置为Array的原型
   1. 为什么不直接重写原型?
   2. 防止污染
4. Proxy 可以原生支持监听数组变化(es6的)

描述响应式原理

1. 监听data变化
2. 组件渲染和更新的过程

diff算法的时间复杂度

1. vue的diff算法是o(n)
   1. 是在o(n^3)基础上做了调整
      - 直比较同一层
      - 父级不同则销毁重建,不再比较子级
      - 通过key和tag来判断是否为同一个

简述diff算法过程

1. patch(elem,vnode) 和 patch(vnode,newVnode)
2. patchVnode 和 addVnodes 和removeVnodes
3. updateChildre(key的重要性)
4. vue为何是异步渲染,$nextTick什么用处
   1. 异步渲染(合并data修改),提高渲染性能
   2. $nextTick 在DOM 更新之后,触发回调

vue常见性能优化

1. 合理使用v-show 和 v-if
   1. v-show 是使用css来控制,适合经常切换
   2. v-if 是框架支持的语法,会在编译成render函数是生效,切换花销大
2. 合理使用computed
   1. 存在缓存机制,只要数据没有变化,就使用缓存
3. v-for加key,避免和v-if同时使用
   1. key可以提高diff算法的速度
   2. v-if的优先级低,vue会先把遍历语法执行完成才会执行v-if,带来了不必要的性能消耗
4. 自定义事件,DOM事件要及时销毁
5. 合理使用异步组件
6. 合理使用keep-live
7. data层级不要太深
   1. ·数据监听会一层一层的去监听,只有监听完了才会继续执行
   2. 数据结构尽量设计的扁平一些
8. 使用vue-loader在还发环境做模版编译(预编译)
9. webpack 层面的优化
10. 前端通用的性能优化,如图片懒加载
11. 使用服务端渲染(SSR)

1. 全部用ts重写,Proxy重写响应式 
2. 性能提升,代码量减少(打包出的生成环境代码)
3. reflect 作用
   1. 和proxy能力一一对应
   2. 规范化、标准化、函数式
   3. 替代掉Object上的工具函数