面试笔记（3.9）

烟雨雪
298 阅读8分钟

面试问题记录

  1. vue生命周期
  2. 父子组件的生命周期顺序
  3. vue组件通信的方法
  4. computed 和 watch区别
  5. nexTick的原理
  6. vuex中actions和mutations的区别
  7. vue修改一个数据后面会发生什么
  8. vue的修饰用过哪些（问修饰符sync的作用）
  9. v-model的定义使用
  10. vue组件封装需要考虑什么（数据同步更改）
  11. 基于ui库二次封装需要考虑什么（当ui组件不满足需求）
  12. 封装组件组件内部的通信数据流
  13. 原型链相关
  14. 防抖节流
  15. es6常用的方法
  16. Promise相关
  17. 回调函数 Promise 和 async/await的区别
  18. Promise  按顺序请求返回
  19. 递归作用。实现递归的方法
  20. 浏览器的重绘和回流
  21. 深拷贝和浅拷贝以及实现的方法
  22. v-for v-if 一起使用的优先级
  23. 判断数据类型

答案记录

1. vue生命周期

image.png image.png

2. 父子组件的生命周期顺序

  • 加载渲染过程 执行的先后顺序为 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted。
  • 子组件更新过程 父beforeUpdate->子beforeUpdate->子updated->父updated
  • 父组件更新过程 　父beforeUpdate->父updated
  • 销毁过程 　父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

3. vue组件通信的方法

对于vue来说，组件之间的消息传递是非常重要的，下面是我对组件之间消息传递的常用方式的总结。

  • props和$emit(常用)
  • attrs和attrs和listeners
  • 中央事件总线（非父子组件间通信）
  • v-model
  • provide和inject
  • parent和parent和children
  • vuex 参考地址 www.cnblogs.com/barryzhang/…

4. computed 和 watch区别

  • 如果一个数据需要经过复杂计算就用 computed computed不使用它是不会执行的
  • 如果一个数据需要被监听并且对数据做一些操作就用 watch

计算属性computed：

  • 支持缓存，只有依赖数据发生改变，才会重新进行计算
  • 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
  • computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
  • 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
  • 如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

侦听属性watch

  • 不支持缓存，数据变，直接会触发相应的操作。
  • watch支持异步；监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
  • 当一个属性发生变化时，需要执行对应的操作；一对多；
  • 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数： 参考地址 www.cnblogs.com/my12-28/p/1…

5. nexTick的原理

参考地址 blog.csdn.net/longtengg1/… www.cnblogs.com/sexintercou…

6. vuex中actions和mutations的区别

actions里写业务逻辑，mutations里写赋值代码。 dispatc和actions对接，commit和mutations对接。 commit是提交执行mutations中的方法，Mutations 是修改数据的，必须同步。 dispatch是提交执行actions中的方法，action 提交的是Mutations,可以是异步操作。action不可以修改store中的数据，需要commit mutation中的方法进行数据修改
当你的操作行为中含有异步操作，比如向后台发送请求获取数据，就需要使用action的dispatch去完成了

7. vue修改一个数据后面会发生什么

这到题可能是考察 beforeUpadte 和 updataed

8. vue的修饰符用过哪些（问修饰符sync的作用）

sync 当父组件传值进子组件，子组件想要改变这个值时，可以这么做

参考地址 juejin.cn/post/698162…

9. v-model的定义使用

参考地址 juejin.cn/post/703585… juejin.cn/post/702854…

10. vue组件封装需要考虑什么

Vue组件的API主要包含三部分：prop、event、slot

  • props 表示组件接收的参数，最好用对象的写法，这样可以针对每个属性设置类型、默认值或自定义校验属性的值，此外还可以通过type、validator等方式对输入进行验证
  • slot可以给组件动态插入一些内容或组件，是实现高阶组件的重要途径；当需要多个插槽时，可以使用具名slot
  • event是子组件向父组件传递消息的重要途径 参考地址 juejin.cn/post/684490… juejin.cn/post/684490…

11. 基于ui库二次封装需要考虑什么（当ui组件不满足需求）

12. 封装组件组件内部的通信数据流

参考第10条

13. 原型链相关

prototype是构造函数特有的属性，它的值是一个对象，这个对象包含的是构造函数想要共享的属性和方法。 实例对象的__proto__属性指向这个实例构造函数的prototype属性 一个是实际对象，一个是指针

14. 防抖节流

防抖 就是指触发事件后 n 秒后才执行函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
节流 就是指连续触发事件但是在 n 秒中只执行第一次函数
参考地址 juejin.cn/post/702095…

15. es6常用的方法

展开运算符 ... map Array.from() find() findIndex() for...of for...in
class类 Promise async/await
const let 模版字符。箭头函数。 结构赋值等

参考地址 juejin.cn/post/684490…

16. Promise相关

promise 有三种状态Pending Resolved Rejected Pending（进行中，初始状态，既不是成功，也不是失败状态。）、Resolved（已完成，又称 Fulfilled）、Rejected（已失败）

  • finally方法 不管Promise最后的状态如何，都要执行一些最后的操作
  • resolve方法 返回一个指定value的成功的Promise对象，参数可以是一个Promise方法，也可以是一个值value
  • reject方法 返回一个指定value的失败的Promise对象，参数可以是一个Promise方法，也可以是一个值value
  • catch方法 捕捉发生错误的回调函数，如果then函数处理完了错误 就不会传到catch里面 除非return一个失败的promise或者throw传递错误
  • all方法 入参是一个 Promise 的实例数组，然后注册一个 then 方法，然后是数组中的 Promise 实例的状态都转为 fulfilled 之后则执行 then 方法
  • any方法 和promise.all相反，当所有的promise执行返回失败才会返回失败，有一个返回成功就会返回那个成功的promise
  • allSettled方法 所有的promise执行完毕，返回一个数组中存放每一个promise的结果
  • race方法 它的入参也是一个 Promise 实例数组，然后其 then 注册的回调方法是数组中的某一个 Promise 的状态变为 fulfilled 的时候就执行

17. 回调函数 Promise 和 async/await的区别

async/await 是建立在 Promises上的，不能被使用在普通回调以及节点回调 async/await相对于promise来讲，写法更加优雅 async/await 和 Promises 很像，不阻塞 async/await 代码看起来像同步代码

18. Promise  按顺序请求返回

1。利用then的链式调用。 2. 结合async/await来实现

19. 递归作用。实现递归的方法

在程序中函数直接或间接调用自己 实现递归的方法 www.cnblogs.com/zhaozhipeng…

20. 浏览器的重绘和回流

回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流
比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变

21. 深拷贝和浅拷贝以及实现的方法

深拷贝 JSON.parse(JSON.stringify())
可以递归递归去复制所有层级属性 数据只有一级层级时可以用展开运算符来实现深拷贝

22. v-for v-if 一起使用的优先级

在 vue 2.x 中， 在一个元素上同时使用 v-if 和 v-for 时， v-for 会优先作用。
在 vue 3.x 中， v-if总是优先于 v-for 生效

23. 判断数据类型

  1. typeof用以获取一个变量或者表达式的类型-一般用于判断值类型
  2. instanceof 运算符是用来判断一个对象是否在其原型链原型构造函数的属性，所以在比较对象（引用类型）时才有意义
  3. constructor本来是原型对象上的属性，指向构造函数。但是根据实例对象寻找属性的顺序，若实例对象上没有实例属性或方法时，就去原型链上寻找，因此，实例对象也是能使用constructor属性
  4. Object.prototype.toString 方法, 可以获取到变量的准确的类型
avatar
文章
阅读
粉丝