vue interview 随笔记载

• 1. 深拷贝 与浅拷贝
     *引用数据类型: 对象 数组 函数 正则 堆内存中
     基本数据类型:Number、String、Boolean、Null、 Undefined
  • a.JSON.stringify() (它是不可以拷贝 undefined ， function， RegExp 等等类型的)
  • b. Object.assign(targent ,source); (不适合多层对象嵌套)
  • c. 递归拷贝 ( ) https://www.jianshu.com/p/f4329eb1bace
  • 2. 跨域
  • 3. 原型链 闭包:
  • 4. 继承
  • 5. 输入url 经历离什么
  • 6. 回流和重绘
  • 7. watch (可异步\ ) 和 computed (多数据影响一个数据)
  • 8. 前端路由模式(hash, history) 一般hash
       总结一下 history 模式的优缺点：
       优点：路径比较正规，没有井号 #
       缺点：兼容性不如 hash，且需要服务端支持，否则一刷新页面就404了
  9. es6
     let: 代码块内有效
     const :声明常量,不可更改
     var: 全局有效
     let 只能声明一次 var 可以声明多次:
     var 声明存在变量提升
  10. vue 路由守卫 befroerotuer

vue::::::::::
1.v-html 会导致哪些问题:

• xss 攻击
• 会替换掉标签内部的子元素

2. 父子组件的调用顺序:
   加载渲染过程: 父 beforeCreate -> 父create–>父beforeMouted —> 子beforeCreate ->子create–>子beforeMouted -->父mouted
   子组件更新过程:
   父berforeUpdate–>子beforeUpdate–>子update–>父update
   调用是先父后子, 销毁是先子后父
3. vue 组件通信: (单向数据流的方式)

• 父子之间: 父到子: props, 子到父$emit, $on
• 获取父子组件实例: $parent $children
• eventbus, Vuex 实现组件间通信
• provide, inject (写插件必备) 父组件提供好数据,自组件把数据注入进来
• ref 也可以获取组件实例调用组件属性和方法

4. Vue 中相同逻辑如何抽离
   Vue.minxin 给组件每个生命周期,每个函数混入一些公共逻辑
   mergeOpt
5. 为什么使用异步组件,(核心优化)
   组件复杂打包回很大. 可以依赖import()这个语法,可以实现文件的分割加载
   components:{
   A: (resolve)=>import("…/…/…/A.vue") (es7) todo import 语法
   }
   Vue.component(
   ‘async-webpack-example’,
   // 这个动态导入会返回一个 Promise 对象。
   () => import(’./my-async-component’)
   )
6. 作用域插槽

• 插槽: 父组件内渲染
• 作用域插槽: 组件内渲染,

7. keep-live
   可以实现对组件的缓存,当组件切换时, 不会对组件卸载,
   常用的2个属性: include/ exclude(不想对谁缓存) max(缓存多少个)
   2个生命周期: activated/ deactivated
   LRU 算法.

8. vue中常见的性能优化:13

• 编码优化
  1. 不要将所有数据放到data中, data 中会增加getter和setter,回收集对应的watcher,(可放到)
  2. v-for 绑定事件,最好使用事件代理
     3.SPA 页面采用keep-alive 缓存组件
     4.拆分组件(提高复用性,增加代码可维护,减少不必要渲染) 组件粒度,只更新这一小组件
     5.v-if =false 并不渲染, 多采用 少使用v-show
     6.key 保证唯一性
     7.Object.freeze() 冻结数据,不需要更新的 不会增加getter,setter. es5
     8.合理使用路由懒加载和异步组件
     9.尽量采用runTime 运行时版本
     10.数持久化,防抖,节流 (防抖: 不停执行,最后只执行一次. 节流:不停执行,某特定时间就只执行一次.)
• vue 加载性能优化
  1.第三方模块,看需导入(懒加载)(babel-plugin-cpomponent)
  2.滚动可视区域动态加载,(https://tangbc.github.io/vue-virtual-scroll-list) 默认3屏, 空div 撑起
  3.图片懒加载 https://githb.com/hilongjw/vue-lazuload.git)
  *用户体验
  骨架屏 app-skeleton =loading 灰色图
  app-shell app壳 导航先加载
  pwa
  *SEO 优化
  预渲染插件:prerender-spa-plugin 适合单页面
  服务端渲染 ssr
  *打包优化
  cdn 方式加载第三方模块:
  多线程打包happpack

9. vue3.0 改进

• ts 来编写
• 支持 composition api (minxin 缺陷,)

10. hash, history 路由

11. vue-router 导航守卫 runQunqe

12. vuex

13. action mutation 区别
    mutation: 同步更新数据内部
    action: 异步操作,把数据提交给mutation更改