vue核心面试题--从源码说

1-为什么要在列表中绑定key,有什么作用

    组件在更新阶段会对两次vnode做比较,以确定走patchVnode还是create-updateParentPlaceholder-destory过程

    节点对比的条件之一就是key值是否等价

    这意味着,在不带key值的情况下(即两次均为undefined),vue有一定概率(如list列表)会将两次vnode判断为sameVnode走patchVnode复用dom节点

    那么,假设当前的需求是选项卡形式,每一个选项卡下都有一个list列表,我们在tab1下的列表1通过点击绑定了class使其高亮,那么当选项卡切换到tab2后,列表1仍然是高亮状态

2-聊聊vue的双向数据绑定

    所谓双向绑定,即数据驱动视图更新,同时视图更新又能change到数据变化

    数据——>视图

    vue的组件创建会经过init过程,这将执行initstate函数对data和props做一次处理,它将遍历data的key执行observe,这是一次递归defineReactive的过程。即对每一个key通过Object.defineProperties设置拦截,在get时向dep收集watcher,在set时通过dep notify到watcher执行render update

    视图——数据

    这表现在v-model指令中,我们在input、textarea中输入的文本能驱动数据的更新。这是因为vue在模板编译阶段将v-model解析成events+props挂载到ast节点上,在patch过程中将会调用updateListeners通过addeventListeners向input添加input事件,当input触发时将调用事件更新props对应的值,以达到视图更新的目的

3-聊聊vuex和redux的异同点

    两者都是响应式编程的状态管理方案,都很好的解决了嵌套组件的数据传递问题,也都是在全局定义store,通过dispatch向reducer派发action以更新store。相比较redux来说,vuex提供了直接连接reducer的方案,即commit

4-在vue中,子组件为何不可以修改父组件传递的props,如果修改了,vue是如何监控到并报警告的?

    组件在init过程中会执行initstate函数,这包括了对props的处理

        可以看到,vue通过重写Object.properties.set方法,当尝试对props修改时发出警告。这么做是为了保证数据的单项流,避免出错

5-为什么vue中的mutations中不能有异步操作

    因为异步操作是有副作用的,它的固定输入不会有固定产出,这将使得程序状态变得不可预测

6-vue2.x中的Object.definedProperty为什么会在vue3中被Proxy替代

    Object.definedProperty只能劫持对象的属性,而对于某一个属性的嵌套则无法劫持,但是Proxy可以,另外就是Proxy提供的可选择api更丰富

7-Vue组件生命周期

    一个组件的创建,要执行init-mount-reder-patch流程。在init过程中,首先通过callhook调用beforeCreate,接着才是initState,这意味着beforeCreate时组件的状态是不可用的,但是可以向vuex或vue-router那样通过Vue.mixin混入一些插件能力,因为此时的组件尚是"干净的",避免了对组件造成可能性的干扰;同样的,由于created是在initState之后,故此时的状态是可用的,因此我们可以在此向后台发起请求获取数据并绑定给data.key;在mount过程中将首先执行beforeMount,此时的render函数以及被编译但尚未执行,故无法进行dom操作;在new Watcher的过程中将会执行到render和update,走patch流程,故mounted时,dom已被创建,因此可以通过ref指令添加dom引用;当我们通过点击事件触发data更新时,将会由dep通知到watcher执行run走render update,此时将会执行beforeUpdate,由于此时的dom还未更新,因此我们可以copy一份旧的dom以尝试做一次回退操作;最后当组件卸载时将会触发beforeDestory和destoryed,这将递归销毁组件。由于vue的模板解析只会对template中的事件进行处理,因此我们通过ref操作dom添加的事件需要手动进行销毁

    最后是与keep-alive相关的activited和deactivited,标识组件的激活和冻结状态

8-vue在v-for时给每个元素绑定事件需要使用事件代理吗

    不需要!

    vue对dom的事件监听是通过dom.addEventListener实现的,对组件的事件处理是通过事件总线完成的

9-vue是如何对数组做响应式处理的?为什么通过下标的方式不行(假设数组为[1,2,3])

    vue会遍历data的每一个key调用observe,当为数组时,实例化observe

  即调用

    可以看到这会进入新一轮的observe

    对于我们的数组[1,2,3,4]而言,每一个key是基本类型,因此vue直接return,并未对数组的每一个key做响应式处理

    那么数组的响应式又是如何做到的呢,在observe实例化过程中,针对数组调用了protoAugment或copyAugment方法,这将我们数组的原型链指向了arrayMethods对象,该对象通过methodsToPatch进行了重写

    因此,当我们对数组执行push/splice操作时能触发更新

10-为什么data应该是一个函数

    在init过程中有对data做处理,当为函数时会执行getData通过call语法将this指向当前实例,它将返回一个独一无二的引用类型

    当组件中存在子组件时,在render过程中将会通过Vue.extend构建子组件构造器,在这一过程中将会对我们的配置项进行合并,如果data不是一个函数,vue会提示警告

    这是因为,当组件被作为公共组件使用时,对象形式的data会被共享,这意味着,在a处的修改会影响b处的展示

11-nextTick的实现

    当组件更新时会通过dep.notify到watcher的update,这将watcher push进队列

    并手动调用nextTick,传入flushSchedulerQueue

    而这实际上是利用了异步api,将我们的回调队列延后到主线之后执行

12-computed是如何实现的

    computed watcher会对依赖的变化做判断,只有依赖变化时才会重新计算。我们知道当data中的数据被修改时会触发watcher的update,这将会把dirty置为true

    那么当在render过程中访问到computed.key时将会触发computedGetter,这将触发computed重新求值

    并在计算后重新置为false



本人能力有限,如有错误,欢迎指正哟~~

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,905评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,140评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,791评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,483评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,476评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,516评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,905评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,560评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,778评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,338评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,925评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2 342

推荐阅读更多精彩内容