分转 社招 一面

一、Vue响应式的原理

Vue2是使用object.defineproperty来做的，
在页面刚开始加载时，Vue会遍历data中的所有属性，
然后使用object.defineproerty把这些属性全部转为getter/setter，
当用户访问或修改某个属性时会触发对应的getter/setter方法，然后会通知每个组件实例对应的watch方法，
最后实现视图的更新。

defineproperty的缺点：
1.对于复杂对象需要深度监听，一次性监听到底，它的计算量是非常大的，性能也是不太好的
2.对于新增、删除操作是无法监听的，需要使用到Vue.$set和Vue.$delete来作为辅助
3.需要重写数组的原生方法来实现数组的监听

所以Vue3使用proxy代替Vue2的defineproperty。

proxy的优势：
1.它可以监听整个对象，而不需要遍历监听属性，性能会有所提升
2.它可以直接监听数组的变化，而不需要重写数组的原生方法，它的便利性会增加很多
3.它有多达13种拦截方法，所以它的功能会更强大
4.proxy作为一个新标准，它会收到浏览器厂商持续的性能优化，也就是它会享受到传说中的新标准的性能红利。

解题思路：
1.Vue2是怎么做的？
2.Vue2这种方法有什么问题?
3.Vue3是怎么做的？
4.Vue3又是怎么解决Vue2的这些问题？

二、JS数据类型

string number null undefined boolean object bigInt symbol

三、call、apply、bind

• call/apply

call 和 apply 都是可以改变this 指向的问题, call 方法中传递参数要求一个 一个传递参数。 但是apply 方法要求传递参数是一个数组形式。

let a = {
    name: 'sunq',
    fn:function(action){
        console.log(this.name + ' love ' + action);
    }
}
let b = {name:'sunLi'}
 
// 正常的this指向
a.fn('basketball');   // sunq love basketball
// 改变this指向，并体现call与apply的区别
a.fn.apply(b,['football']); // sunLi love football
a.fn.call(b,'football'); // sunLi love football

• bind

还是上面的示例，bind也可以实现call和apply的效果。bind的不同之处在于bind会返回一个新的函数。如果需要传参，需要再调用该函数并传参

a.fn.bind(b)('piano'); // sunLi love piano

四、什么是Promise？

Promise 是 JavaScript 中表示 异步操作最终完成或失败 的对象。它可以将异步操作的结果（成功或失败）与后续处理逻辑解耦，使代码更清晰、可读性更高。

Promise语法格式

new Promise(function (resolve, reject) {
  // resolve 表示成功的回调
  // reject 表示失败的回调
}).then(function (res) {
  // 成功的函数
}).catch(function (err) {
  // 失败的函数
})

出现了new关键字，就明白了Promise对象其实就是一个构造函数，是用来生成Promise实例的。能看出来构造函数接收了一个函数作为参数，该函数就是Promise构造函数的回调函数，该函数中有两个参数resolve和reject，这两个参数也分别是两个函数！

简单的去理解的话resolve函数的目的是将Promise对象状态变成成功状态，在异步操作成功时调用，将异步操作的结果，作为参数传递出去。reject函数的目的是将Promise对象的状态变成失败状态，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。