八股文-vue

欢迎阅读 vue 八股文

📌 vue

Q1：不会冒泡的事件

A：
focus、blur事件、load、unload事件、scroll事件

Q2：Mouseenter、mouseover的区别

A：
mouseover会从子元素冒泡到父元素，mouseenter不会在子元素冒泡
mouseover还在子元素上触发，mouseenter只在本元素上触发
mouseenter检测首次进入元素的事件

Q3：MessageChanneI 是什么， 有什么使用场景？

A：
MessageChanne1 是一个JavaScript API, 用于在两个独立的执行环境之间建立双向通信的通道。MessageChanne1 提供了两个通信端点（ portl 和port2 ） 可以在两 个不同的执行环境之间传递消息， 并通过事件监听的方式来处理这些消息。
使用场景包括
1 · WebWorkers通信
2 · 不同浏览上下文(browsing context) 之间的通信
3 ·可以用于在主线程和Shared Worker 之间建立通信通道
4 · 服务端和客户端之间的通信
5 · 异步任务处理： 在某些场景中， 使用MessageChanne1 可以更方便地处理异步任务， 因为它提供了独立于主 线程的通信通道

Q4：async、await的实现原理

A：
async 、await 是co 库的官方实现。也可以看作自带启动器的generator 函数的语法糖。不同的是 async 、await 只支持Promise 和原始类型的值，不支持thunk 函数。
本质改变JavaScript 单线程、使用回调处理异步任务

Q5：Proxy 能够监听到对象中的对象的引用吗

A：
Proxy 可以监听到对象中的对象的引用
当使用PPOXY 包装一个对象时， 可以为该对象的任何属性创建一个拦截器， 包括属性值为对象的情况。

Q6：如何让var[a,b]={a:1,b:2}解构赋值成功

A：
我们要在obj上添加[symbol. iterator] 方法并且完成next方法的逻辑

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

const obj = {
    a: '1',
    b: '2',
    [Symbol.iterator]() {
        let index = 0
        const keys = Object.keys(this)
        return {
            next() {
                if (index < keys.length) {
                    return {
                        done: false,
                        value: keys[index++]
                    }
                }
                return { 
                    done: true, 
                    value: undefined 
                }
            }
        }
    }
}

const [a, b] = obj
console.log(a, b) // 输出: 'a' 'b'

Q7：common.js和es6中模块引入的区别

A：
common.js是一种模块系统主要用于Node.js 环境它使用require 函数来引入模块 并使用module.exports来导出模块
es6使用import 和export 语法来定义模块， 广泛用于现代前端开发

Q8：vue3中响应式原理

A：
初始化一个Map类型的depsMap 变量用来保存每个需要响应式变化的对象属性(key为对象的属性 value为前面set集合)
创建track() 函数用来将需要执行的副作用保存到depsMap 变量中对应的对象属性下(也称收集副作用)
创建trigger() 函数用来执行dep 变量中指定对象属性的所有副作用

Q9：created 和mounted 之间的时间差受什么影响

A：
created 和mounted 之间的时间差主要受到模板编译、虚拟DOM 渲染的复杂性、异步操作、浏览 器性能及其他生命周期钩子中执行代码的影响。在编写vue 应用时， 优化这些方面可以减少created 和 mounted 之间的时间差， 提高应用性能。