2024年1月11日

1 Proxy替换defineProperty的有点

1 Object.defineProperty只能遍历对象属性进行劫持 2 Proxy直接可以劫持整个对象，并返回一个新对象，我们可以只操作新的对象达到响应式目的 3 Proxy可以直接监听数组的变化（push、shift、splice） 4Proxy有多达 13 种拦截方法,不限于apply、ownKeys、deleteProperty、has等等，Object.defineProperty不具备

因为defineProperty自身的缺陷，导致Vue2在实现响应式过程需要实现其他的方法辅助（如重写数组方法、增加额外set、delete方法）

2 $set

用于动态设置对象的属性值,当我们使用 $set 方法时，Vue 会将目标对象以及需要设置的属性路径作为参数传入，并在对象上创建新的属性或者更新属性的值。使用 $set 方法还可以触发 Vue 的更新机制，使得依赖于该属性的组件能够自动更新。

原理：

• 如果目标是数组，直接使用数组的 splice 方法触发响应式；

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

3 oss文件上传

1 引入OSS模块和Promise模块。

 OSS = require('ali-oss');
const Promise = require('promise');

2 创建OSS实例并初始化相关参数。

 client = new OSS({
  // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
  region: 'yourRegion',
  // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
  accessKeyId: 'yourAccessKeyId',
  // 阿里云账号AccessKeySecret。
  accessKeySecret: 'yourAccessKeySecret',
  // 填写Bucket名称，例如examplebucket。
  bucket: 'examplebucket',
});

3 调用client.put方法上传文件。

 uploadFile = async () => {
  try {
    // 填写Object完整路径，完整路径中不能包含Bucket名称，例如exampledir/exampleobject.txt。
    const result = await client.put('exampledir/exampleobject.txt', 'D:\\localpath\\examplefile.txt');
    console.log(result);
  } catch (err) {
    console.log(err);
  }
};

4 调用uploadFile函数开始上传文件。

uploadFile();

4 单点登录

单点登录（SSO）的技术来实现。具体步骤如下：

1. 在手机端应用中，使用扫码登录功能，验证用户身份并登录成功。

2. 在手机端应用中，将登录状态等信息（例如使用Token）保存在手机端的本地存储（localStorage）中，以保持登录状态。

3. 在PC端应用中，通过浏览器访问登录页面，并在页面加载时检查手机端存储中的登录状态信息。

4. 如果手机端存储中有有效的登录状态信息，则PC端应用可以直接登录，否则PC端应用显示登录表单。

5. 当用户在PC端应用中登录成功后，将登录状态信息保存到PC端的本地存储中。

6. 当用户在手机端打开应用时，检查PC端存储中的登录状态信息，如果存在有效的登录状态信息，则直接登录，否则显示扫码登录界面。

通过这种方式，当用户在手机端登录成功后，PC端应用可以共享用户的登录状态信息，实现单点登录的效果。