学习之路一

321 阅读6分钟

1.请说一下响应式数据的理解?

首先在我们在Object.defineProperty中getter()和setter() ,在get和set中会对传入的数据进行监听,比如我传入一个对象,当我进行调用的时候会走get() 当我进行赋值的时候会走set()这样对数据就有可操作性

2.Vue中如何检测数组变化?

首先进行了原型链重写(push,pop,shift,unshift,splice, sort,reverse七个方法),使用observeArray 进行数组监听,(同样只会对对象进行监听,数组改变还是不会监听到)而是在数组使用(push,unshift,splice)中方法的时候会触发订阅从而更新页面

3.Vue中模板编译原理?

  • 首先进行编译,优先render函数,之后在el,最后template
  • template解析成ast语法树,
  • 调用render函数,生成虚拟dom
  • 替换真实dom

4.生命周期钩子是如何实现的?

生命周期的钩子个人理解为设置在某个阶段的特定回调函数,这些函数挂在options上,在init中对这些函数依次执行,调用callHook函数触发回调

5.Vue.mixin的使用场景和原理?

mixin个人理解分为两种一种是挂在全局的mixin会在全局中触发自定义函数同时与生命周期一同被加载,会触发钩子函数,还有一种是自定义mixin,二者都为函数加载时触发的钩子函数同时会被调用mixin中的生命周期,个人理解先说局部调用,在编写公共组件文件中或者普通开发中有一些共用的方法或者共用参数需要使用时,这个时候就会用到mixin,在options中有mergeOptions来进行方法合并

6.nextTick在哪使用,原理是?

nextTick.一般使用场景是在页面渲染加载之后执行的方法或定义参数-(可以理解为异步操作)

原理是在VUE 内部进行渲染后会去找是否有nextTick存在,如果有会在页面视图加载更新之后触发,可以理解为异步调用,同时为了考虑兼容行会向下兼容,有promise()->mutiationObserver()->setImmediate()->setTimeout 来进行兼容

7.Vue为什么需要虚拟DOM?

Vue使用虚拟DOM个人理解为减少大量DOM覆盖操作,减少浏览渲染压力,同时增强DOM的可复用性,加快编译速度,具体体现首先会在VUE加载徐然DOM的同时生成一份虚拟DOM节点树,之后在进行DOM操作时会根据虚拟DOM记录的watcher进行更新生成新的虚拟DOM会与老的虚拟DOM进行比较,从而生成新的DOM

8.Vue中diff的原理?

diff算法是根据节点中的KEY去进行新老比较,首先会生成四个几点,newStart newEnd oldStart oldEnd 之后 有一下几种对比方式, newStart -》oldStart 、 newEnd-》oldEnd 、newStart-》oldEnd、oldStart-》newEnd  还有一种是交叉对比,还有一种是暴力比较 

7. 既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异? 

个人理解:消耗浏览器性能的,就是频繁的去直接操作dom,渲染,删除,插入等等。。所以个人理解这是还是为了提高用户体验,减少资源开销的一种处理方式,diff的检测其实就是对内存消耗的一种保护,

8. Vue 中 computed 和 watch 的区别? 

首先区别一 computed 是可以缓存的。watch不可以(支持异步),其次就是他们内部结构不一样,在watch中dep中会有user 这个属性进行区别,在computed中会dirty这个值,数据发生改变的时候dirty会触发重新获取值,他俩相同点都是运用$watchar 来做数据更新的

9.Vue 组件间传值的方式及之间区别

个人理解:最常用的就是props。父子传值,其次就是使用VUEX(全局想在哪用在哪用想怎么用怎么用哈哈) ,当然还有vue.bus 其实BUS就是new 一个VUE 的实例来进行数据监听存储

10.$attrs 是为了解决什么问题出现的?应用场景有哪些?provide/inject 不能解决它能解决的问题吗?

个人理解是为了减少组件嵌套传递多个值,如:“父组件给子组件5个值 子组件又自己的子组件4个父组件的值 ” 这个时候可以使用的$attrs  。 provide/inject  个人理解是可以的只有组件之间有关联不管层级多深都可以找到但是我理解这个是单项的,如果回传就可能有问题了

11.Vue.set方法是如何实现的?

先说一下set.set个人理解就是给数据增加响应式,如何实现的就是在调用set的时候会传入target, key, value 这三个参数,然后首先会去对target进行甄别是对象还是数组 key顾名思义就是要处理哪块,value 就是响应值,再往后我也不清楚了

12.Vue的生命周期方法都有哪些?一般在哪一步发起AJAx请求及原因?

beforeCreate()/create()/beforeMount()/mounted/beforeUpdate()/update()/beforeDestroy()/destroy() / 个人理解经常在mounted的时候进行AJAx调用,因为在create的时候只是模板还未进行编译所以个人一般在 mounted 进行请求调用

13.移除事件监听使用 beforeDestroy 还是 destroyed 钩子?

个人理解是destroyed钩子.因为在触达事件的时候都是钩子进行处理的

14

15

16

17

18.函数式组件的优势和原理

不会接受组件的生命周期,只是通过props来进行传递,优势个人理解就是减少资源,因为没有羼杂生命周期这块大的逻辑,所以渲染速递肯定最快的,同时没有this指向。个人理解单纯的接收数据的静态模板

19.v-if和v-for谁优先级更高

v-for 的优先级要高于v-if  如果有场景需要一同使用,那么就会用到计算属性来避免v-if的出现

20.vue-router有几种狗子函数?具体是什么及执行流程是怎样的?

分为三类,1,全局守卫。2,路由守卫。3,组件守卫

执行流程:

  • 导航被触发
  • 组件里面调用beforeRouteLeave
  • 可以重用调用beforeRouteUpdate
  • 如果不可重用调用beforeEnter 
  • beforeRouteEnter
  • beforeRouteResolve
  • afterEach
  • DOM更新
  • beforeRouteEnter的next回调

21.vue-router有几种模式?

常用两种模式 1。hash模式2。history模式

hash是通过window.onhashchange 时间来做监听从而进行路由器换

history是通过路由改变像后端发起请求

22.组件中写name选项有哪些及用处

首先最直观的组件中写name 属性当一个页面中有多个组件使用时如果报错,写name会直接报出对应name组件错误,更快的排查问题,其次就是在是keep-alive时候缓存是需要组件name名称的,同时进行递归组件的时候也需要name属性

23.vue事件修饰符有哪些,原理是什么

  • stop 阻止事件魔炮
  • prevent 阻止默认事件发生
  • capture  阻止捕获
  • self 将事件绑定到自身只有自己才能触发
  • once 事件只能触发一次
  • passive 表示处理事件函数中不会调用preventDefault函数,就会减少了额外的监听,从而提高了性能;所以不能和.prevent修饰符一同使用