前端基础的40个问题及答案【第31-40问】

前端基础的40个问题及答案【第31-40问】

31、vue的父组件和子组件生命周期钩子函数执行顺序？

执行顺序： 父组件先创建，然后子组件创建；子组件先挂载，然后父组件挂载，即“父beforeCreate-> 父create -> 子beforeCreate-> 子created -> 子mounted -> 父mounted”。

父子组件生命周期执行顺序:
父beforeCreate-> 父create -> 子beforeCreate-> 子created -> 子mounted -> 父mounted

父子组件生命周期执行顺序:
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

32、父组件可以监听到子组件的生命周期吗？

可以
方法一
使用$emit
方法二：
使用@hook:

详细解释参考：https://www.jianshu.com/p/f9488806f340

33、vue框架怎么实现对象和数组的监听？

Vue 框架是通过遍历数组 和递归遍历对象，从而达到利用 Object.defineProperty() 也能对对象和数组（部分方法的操作）进行监听。

解释参考：https://www.cnblogs.com/Rivend/p/12629880.html

34、vue是如何实现数据双向绑定的？

Vue数据双向绑定原理是通过 数据劫持结合发布者-订阅者模式 的方式来实现的，首先是通过 ES5 提供的 Object.defineProperty()方法来劫持（监听）各属性的 getter、setter，并在当监听的属性发生变动时通知订阅者，是否需要更新，若更新就会执行对应的更新函数。

详细解释：https://blog.nowcoder.net/n/8517450fe4fd4220b4078f9c61e42ec1

35、vue怎么用vm.$set()解决对象新增属性不能响应的问题？

原理

• 如果目标是数组，直接使用数组的 splice 方法触发相应式；
• 如果目标是对象，会先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处>>>理，则是通过调用 defineReactive 方法进行响应式处理（ defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法）

详细解释：https://www.cnblogs.com/Rivend/p/12630382.html

36、虚拟DOM的优缺点？

保证性能下限

无需手动操作 DOM

跨平台

详细解释：https://www.jianshu.com/p/951431d684a0

37、虚拟DOM实现原理？

解释1： 用js模拟一颗DOM树，放在浏览器的内存中，当需要变更时，虚拟DOM进行diff算法进行新旧虚拟DOM的对比，将变更放入到队列中。反应到实际的DOM上，减少DOM的操作。
解释2： 虚拟DOM将DOM转换为一颗js树。diff算法逐级的进行比较、删除、新增操作。但是如果存在多个相同的元素可能比浪费性能，所以React和Vue引用key值进行区分。

详细解释：https://juejin.cn/post/6844904009606791175

38、vue中的key有什么作用？

使用key属性，这样可以提高列表渲染的效率，提高了页面的性能。

详细解释1:https://cloud.tencent.com/developer/article/1676293
详细解释2:https://juejin.cn/post/6907456768222330893

39、你有对vue项目进行哪些优化？

第一个方面：代码层面的优化
• v-if 和 v-show 区分使用场景
• computed 和 watch 区分使用场景
• v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
• 长列表性能优化
• 事件的销毁
• 图片资源懒加载
• 路由懒加载
• 第三方插件的按需引入
• 优化无限列表性能
• 服务端渲染 SSR or 预渲染

第二个方面：Webpack 层面的优化
• Webpack 对图片进行压缩
• 减少 ES6 转为 ES5 的冗余代码
• 提取公共代码
• 模板预编译
• 提取组件的 CSS
• 优化 SourceMap
• 构建结果输出分析
• Vue 项目的编译优化

第三个方面：基础的 Web 技术的优化
• 开启 gzip 压缩
• 浏览器缓存
• CDN 的使用
• 使用 Chrome Performance 查找性能瓶颈

40、对于vue3.0特性你有什么了解的吗？

更新了很多新特性大致有

• compostion api
• typescript【对象式的组件声明方式】
• proxy【监测机制的改变】
• vom静态标记
• fragment
• teleport
• suspense
• 自定义 render【模板】

Vue3.0改进主要在以下几点
更快

• 虚拟 DOM 重写
• 优化 slots 的生成
• 静态树提升
• 静态属性提升
• 基于 Proxy 的响应式系统

更小

• 通过摇树优化核心库体积

更易于维护

• TypeScript + 模块化

更加友好

• 跨平台：编译器核心和运行时核心与平台无关，使得 Vue 更容易与任何平台（Web、Android、iOS）一起使用

更容易使用

• 改进的 TypeScript 支持，编辑器能提供有力的类型检查和错误及警告
• 更好的调试支持
• 独立的响应化模块
• Composition API

基础解释：https://juejin.cn/post/7016695233165410311

详细解释1：https://juejin.cn/post/6940454764421316644#heading-25