vue 前端面试常见问题汇总(1-10)

目录

#前言@[TOC](文章目录)

#一、React / Vue 项目时为什么要在列表组件中写 key,其作用是什么?@[TOC](文章目录)

#二、Vue 的双向数据绑定,Model 如何改变 View,View 又是如何改变 Model 的@[TOC](文章目录)

参数

#三、在 Vue 中,子组件为何不可以修改父组件传递的 Prop?如果修改了,Vue 是如何监控到属性的修改并给出警告的?@[TOC](文章目录)

#四、双向绑定和 vuex 是否冲突?@[TOC](文章目录)

#五、Vue 的响应式原理中 Object.defineProperty 有什么缺陷?为什么在 Vue3.0 采用了 Proxy,抛弃Object.defineProperty?@[TOC](文章目录) 

#六、Vue 的父组件和子组件生命周期钩子执行顺序是什么?@[TOC](文章目录)

 #七、vue 在 v-for 时给每项元素绑定事件需要用事件代理吗?为什么?@[TOC](文章目录)

 #八、vue 渲染大量数据时应该怎么优化?@[TOC](文章目录)

 #九、vue 如何优化首页的加载速度?vue 首页白屏是什么问题引起的?如何解决呢?@[TOC](文章目录)

 #十、Vue 中的 computed 是如何实现的?(腾讯、平安)@[TOC](文章目录)

#总结@[TOC](文章目录)



前言

前端面试问题,可能问题不是很全面,但基本上是常见的且自我补充的一个过程,相信从中可以完善自己。另外部分见解答案解析来自github博客等资料整理过程中如有错误欢迎指出!

一、React / Vue 项目时为什么要在列表组件中写 key,其作用是什么?

key是给每一个vnode的唯一id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点,带key就不是就地复用了,在sameNode函数 a.key === b.key对比中可以避免就地复用的情况,所以会更加准确;利用key的唯一性生成map对象来获取对应节点,比遍历方式更快,而如果没有key,那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射,另一种是遍历查找。相比而言。map映射的速度更快。

二、Vue 的双向数据绑定,Model 如何改变 View,View 又是如何改变 Model 的?

核心是利用ES5的Object.defineProperty,这也是Vue.js为什么不能兼容IE8及以下浏览器的原因。

Object.defineProperty方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回这个对象.(实现的数据劫持)

Object.defineProperty(obj, prop, descriptor)

参数

obj

要定义属性的对象。

prop

要定义或修改的属性的名称或 Symbol 。

descriptor

要定义或修改的属性描述符。

observe的功能就是用来监测数据的变化。实现方式是给非VNode的对象类型数据添加一个Observer,如果已经添加过则直接返回,否则在满足一定条件下去实例化一个Observer对象实例Observer是一个类,它的作用是给对象属性添加getter和setter,用于 收集依赖 和 派发更新

收集依赖 

  • const dep = new Dep() // 实例化一个Dep实例
  • 在get函数中通过dep.depend()做依赖收集
  • vue 前端面试常见问题汇总(1-10)_第1张图片Dep是一个Class,它定义了一些属性和方法,它有一个静态属性target,这是一个全局唯一Watcher【同一时间内只能有一个全局的Watcher被计算】Dep实际上就是对Watcher的一种管理,Dep脱离Watcher单独存在是没有意义的。Watcher和Dep就是典型的观察者设计模式。

收集过程:当我们实例化一个渲染watcher的时候,首先进入watcher的构造函数逻辑,然后执行他的this.get()方法,进入get函数把Dep.target赋值为当前渲染watcher并压栈(为了恢复用)。接着执行vm._render()方法,生成渲染VNode,并且在这个过程对vm上的数据访问,这个时候就触发数据对象的getter(在此期间执行Dep.target.addDep(this)方法,将watcher订阅到这个数据持有的dep的subs中,为后续数据变化时通知到哪些subs做准备)。然后递归遍历添加所有子项的getter。

Watcher在构造函数中初始化两个Dep实例数组。newDeps代表新添加的Dep实例数组,deps代表上一次添加的Dep实例数组。
依赖清空:在执行清空依赖(cleanupDeps)函数时,会首先遍历deps,移除对dep的订阅,然后把newDepsIds和depIds交换,newDeps和deps交换,并把newDepIds和newDeps清空。考虑场景,在条件渲染时,及时对不需要渲染数据的订阅移除,减少性能浪费。

考虑到Vue是数据驱动的,所以每次数据变化都会重写Render,那么vm._render()方法会再次执行,并再次触发数据。

收集依赖的目的是为了当这些响应式数据发生变化,触发它们的setter的时候,能知道应该通知哪些订阅者去做相应的逻辑处理派发更新

 派发更新

  • childOb = !shallow && observe(newVal) // 如果shallow为false的情况,会对新设置的值变成一个响应式对象
  • dep.notify() // 通知所有订阅者
  • vue 前端面试常见问题汇总(1-10)_第2张图片

派发过程:当我们组件中对响应的数据做了修改,就会触发setter的逻辑,最后调用dep.notify()方法,它是Dep的一个实例方法。具体做法是遍历依赖收集中建立的subs,也就是Watcher的实例数组【subs数组在依赖收集getter中被添加,期间通过一些逻辑处理判断保证同一数据不会被添加多次】,然后调用每一个watcher的update方法。

update函数中有个queueWatcher(this)方法引入了队列的概念,是vue在做派发更新时优化的一个点,它并不会每次数据改变都会触发watcher回调,而是把这些watcher先添加到一个队列中,然后在nextTick后执行watcher的run函数。

run函数:先通过this.get()得到它当前的值,然后做判断,如果满足新旧值不等、新值是对象类型、deep模式任何一个条件,则执行watcher的回调,注意回调函数执行的时候会把第一个参数和第二个参数传入新值value和旧值oldValue,这就是当我们自己添加watcher时候可以在参数中取到新旧值的来源。对应渲染watcher而言,在执行this.get()方法求值的时候,会执行getter方法。因此在我们修改组件相关数据时候,会触发组件重新渲染,接着重新执行patch的过程。

简单概括:vue通过Object.defineProperty 劫持传进来的数据, 然后在数据getter的时候订阅重新编译模板的消息,然后通过监听元素的事件,监听输入框值变化,将新的值重新赋值给被劫持的data,这样就会触发setter函数,再setter函数中就会去发布重新编译模板的消息;

三、在 Vue 中,子组件为何不可以修改父组件传递的 Prop?如果修改了,Vue 是如何监控到属性的修改并给出警告的?

  • 子组件为何不可以修改父组件传递的 Prop
    单向数据流,易于监测数据的流动,出现了错误可以更加迅速的定位到错误发生的位置。所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。
  • 如果修改了,Vue 是如何监控到属性的修改并给出警告的。
  • if (process.env.NODE_ENV !== 'production') {
          var hyphenatedKey = hyphenate(key);
          if (isReservedAttribute(hyphenatedKey) ||
              config.isReservedAttr(hyphenatedKey)) {
            warn(
              ("\"" + hyphenatedKey + "\" is a reserved attribute and cannot be used as component prop."),
              vm
            );
          }
          defineReactive$$1(props, key, value, function () {
            if (!isRoot && !isUpdatingChildComponent) {
              warn(
                "Avoid mutating a prop directly since the value will be " +
                "overwritten whenever the parent component re-renders. " +
                "Instead, use a data or computed property based on the prop's " +
                "value. Prop being mutated: \"" + key + "\"",
                vm
              );
            }
          });
        }
    

    在initProps的时候,在defineReactive时通过判断是否在开发环境,如果是开发环境,会在触发set的时候判断是否此key是否处于updatingChildren中被修改,如果不是,说明此修改来自子组件,触发warn提示。

简单来说就是:一个父组件下不只有你一个子组件。同样,使用这份 prop 数据的也不只有你一个子组件。如果每个子组件都能修改 prop 的话,将会导致修改数据的源头不止一处。所以我们需要将修改数据的源头统一为父组件,子组件像要改 prop 只能委托父组件帮它。从而保证数据修改源唯一。

四、双向绑定和 vuex 是否冲突?

严格模式"use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。

它不是一条语句,但是是一个字面量表达式,在 JavaScript 旧版本中会被忽略。

"use strict" 的目的是指定代码在严格条件下执行。

严格模式下你不能使用未声明的变量。

在严格模式中使用Vuex,当用户输入时,v-model会试图直接修改属性值,但这个修改不是在mutation中修改的,所以会抛出一个错误。当需要在组件中使用vuex中的state时,有2种解决方案:
1、在input中绑定value(vuex中的state),然后监听input的change或者input事件,在事件回调中调用mutation修改state的值
2、使用带有setter的双向绑定计算属性。见以下例子(来自官方文档):


computed:{ 
message:{ 
get (){ 
return this.$store.state.obj.message
 },
set (value) { this.$store.commit('updateMessage', value) 
} 
}
 }

VueX规定了单向数据流,把把VueX的State放到v-model双向绑定报错,本来就是代码问题。和冲突没关系。而且VueX的双向绑定就是利用了new Vue实现的。为了单项数据流设置了Flag作为标记。不应该是VueX和双向绑定的冲突。是coder的问题。 (来自github) 

五、Vue 的响应式原理中 Object.defineProperty 有什么缺陷?为什么在 Vue3.0 采用了 Proxy,抛弃Object.defineProperty?

  1. Object.defineProperty无法监控到数组下标的变化,导致通过数组下标添加元素,不能实时响应;
  2. Object.defineProperty只能劫持对象的属性,从而需要对每个对象,每个属性进行遍历,如果,属性值是对象,还需要深度遍历。Proxy可以劫持整个对象,并返回一个新的对象。
  3. Proxy不仅可以代理对象,还可以代理数组。还可以代理动态增加的属性。

 Object.defineProperty的第一个缺陷,无法监听数组变化。 然而Vue的文档提到了Vue是可以检测到数组变化的,但是只有以下八种方法,vm.items[indexOfItem] = newValue这种是无法检测的。为了解决这个问题,经过vue内部处理后可以使用以下几种方法来监听数组

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

由于只针对了以上八种方法进行了hack处理,所以其他数组的属性也是检测不到的,还是具有一定的局限性。

Object.defineProperty只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。Vue 2.x里,是通过 递归 + 遍历 data 对象来实现对数据的监控的,如果属性值也是对象那么需要深度遍历,显然如果能劫持一个完整的对象是才是更好的选择。

而要取代它的Proxy有以下两个优点;

可以劫持整个对象,并返回一个新对象

Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等是Object.defineProperty不具备的。

Proxy返回的是一个新对象,我们可以只操作新的对象达到目的,而Object.defineProperty只能遍历对象属性直接修改。

当然,Proxy的劣势就是兼容性问题,而且无法用polyfill磨平,因此Vue的作者才声明需要等到下个大版本(3.0)才能用Proxy重写

六、Vue 的父组件和子组件生命周期钩子执行顺序是什么?

vue的生命周期:beforeCreate created beforeMount mounted beforeDestory destoryed beforeUpdate updated

  1. 加载渲染过程
    父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
  2. 子组件更新过程
    父beforeUpdate->子beforeUpdate->子updated->父updated
  3. 父组件更新过程
    父beforeUpdate->父updated
  4. 销毁过程
    父beforeDestroy->子beforeDestroy->子destroyed->父destroyed总结:从外到内,再从内到外

         总结:从外到内,再从内到外

 七、vue 在 v-for 时给每项元素绑定事件需要用事件代理吗?为什么?

首先我们需要知道事件代理主要有什么作用?

  • 事件代理能够避免我们逐个的去给元素新增和删除事件
  • 事件代理比每一个元素都绑定一个事件性能要更好

 vue没有自动做事件代理,只有在非常非常多的节点中,使用事件代理会提高一点性能,否则绑定在每个节点中几乎没有差别

  • 在v-for中,我们直接用一个for循环就能在模板中将每个元素都绑定上事件,并且当组件销毁时,vue也会自动给我们将所有的事件处理器都移除掉。所以事件代理能做到的第一点vue已经给我们做到了
  • 在v-for中,给元素绑定的都是相同的事件,所以除非上千行的元素需要加上事件,其实和使用事件代理的性能差别不大,所以也没必要用事件代理

 八、vue 渲染大量数据时应该怎么优化?

1.添加加载动画,优化用户体验
2.利用服务器渲染SSR,在服务端渲染组件
3.避免浏览器处理大量的dom,比如懒加载,异步渲染组件,使用分页,尽量不要再用vue的双向数据绑定了 或者只用部分页面中处理的数据
4.对于固定的非响应式的数据,使用Object.freeze冻结

 九、vue 如何优化首页的加载速度?vue 首页白屏是什么问题引起的?如何解决呢?

首页白屏的原因:
vue是单页面应用, html 是靠 js 生成,因为首屏需要加载很大的js文件(app.js vendor.js),需要将所有需要的资源都下载到浏览器端并解析。

考虑解决办法:

  • 1.使用首屏SSR + 跳转SPA方式来优化
  • 2.改单页应用为多页应用,需要修改webpack的entry
  • 3.改成多页以后使用应该使用prefetch的就使用
  • 4.处理加载的时间片,合理安排加载顺序,尽量不要有大面积空隙
  • 5.CDN资源还是很重要的,最好分开,也能减少一些不必要的资源损耗
  • 6.使用Quicklink,在网速好的时候 可以帮助你预加载页面资源
  • 7.骨架屏这种的用户体验的东西一定要上,最好借助stream先将这部分输出给浏览器解析
  • 8.合理使用web worker优化一些计算
  • 9.缓存一定要使用,但是请注意合理使用
  • 10.代码拆分,code split、动态import
  • 11.优化打包后内容的体积, 去掉不必要的代码,使用gzip压缩
  • 12.最后可以借助一些工具进行性能评测,重点调优,例如使用performance评测

 十、Vue 中的 computed 是如何实现的?(腾讯、平安)

computed本身是通过代理的方式代理到组件实例上的,所以读取计算属性的时候,执行的是一个内部的getter,而不是用户定义的方法。

computed内部实现了一个惰性的watcher,在实例化的时候不会去求值,其内部通过dirty属性标记计算属性是否需要重新求值。当computed依赖的任一状态(不一定是return中的)发生变化,都会通知这个惰性watcher,让它把dirty属性设置为true。所以,当再次读取这个计算属性的时候,就会重新去求值。

惰性watcher/计算属性在创建时是不会去求值的,是在使用的时候去求值的。


总结

如果你觉得这面试题对你有帮助,我想请你帮我个小忙:来一个点赞收藏三连击;

其实做这个专栏我也有私心,就是希望借助每天写一篇面试题,督促自己学习,以免在吹水群甚至都没有谈资!
对了,如果你的朋友也在准备面试前端开发,请将这个系列扔给他,
好了,今天就到这里,学废了的同学,记得在评论区留言:打卡。给同学们以激励。

再次说明整理问题不易,如有内容的需要改进的请指出,以便及时修改!感谢!

学习过程中,祝大家早日取得合适offer!

你可能感兴趣的:(vue面试题)