vue核心面试题实例代码分析

这篇文章主要介绍了Vue核心面试题实例代码分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇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

关于“vue核心面试题实例代码分析”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue核心面试题实例代码分析”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。