vue3 watch和watchEffect的作用与区别？

1. watch() 用于观察单个或多个源数据的变化，并在数据变化时执行特定的回调函数。接受两个参数，第一个参数是要观察的数据源，第二个参数是当数据源发生变化时要执行的回调函数。watch() 的回调函数接收两个参数，分别是新值和旧值。

2. watchEffect() 立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。与 watch() 不同，watchEffect() 不需要指定观察的数据源，它会自动跟踪在执行过程中用到的所有响应式源数据。

canvas用于判断的方法有哪几种？

• isPointInPath()：判断一个点是否在当前路径内部。
• isPointInStroke()：判断一个点是否在当前路径的轮廓线上。
• isPointInFill()：（仅在使用 clip() 方法后有效）判断一个点是否在当前裁剪区域内部。

为什么calc计算要加空格？

一句话：需要支持负数，直接上效果。

<style>
  .demo {
    width: 100px;
    height: calc(200px - -100px);
    background: green;
  }
</style>
<div class="demo"></div>

格式化文件大小

方式1：

function formatFileSize(fileSize) {
  if (fileSize < 1024) {
    return fileSize + 'B';
  } else if (fileSize < (1024*1024)) {
    var temp = fileSize / 1024;
    temp = Math.round(temp);
    return temp + 'KB';
  } else if (fileSize < (1024*1024*1024)) {
    var temp = fileSize / (1024*1024);
    temp = Math.round(temp);
    return temp + 'MB';
  } else {
    var temp = fileSize / (1024*1024*1024);
    temp = Math.round(temp);
    return temp + 'GB';
  }
}

方式2：

const formatSize = (bytes: number): string => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  const size = parseFloat((bytes / Math.pow(k, i)).toFixed(2))
  return `${size} ${sizes[i]}`
}

a标签rel属性有哪些值？

在HTML的a标签中，rel属性用于指定链接和所链接页面或资源之间的关系。以下是一些常见的rel属性值：

• nofollow：表示链接不会被搜索引擎追踪，即不会对链接目标的SEO排名产生影响。
• noreferrer：表示点击链接时不会向链接目标发送Referrer信息，以保护用户隐私。
• noopener：表示点击链接时会打开一个新的浏览器窗口，并将窗口的opener属性设置为null，以避免窗口劫持攻击。
• external：表示链接指向的页面或资源位于当前网站以外，有利于用户区分内部链接和外部链接。
• author：表示链接目标内容的作者或版权方与当前页面有关联。

除了这些常见的rel属性值之外，还可以自定义rel属性来表达其他关系，例如license、tag等。在使用rel属性时，应根据实际情况选择合适的属性值，以增强链接的语义化和可读性。

如何提高浏览器性能？

1. 优化 JavaScript 代码和页面结构，减少页面加载时间和渲染时间。
2. 减少页面 HTTP 请求次数，使用缓存技术和压缩技术来优化网络请求性能。
3. 使用 Web Workers、WebAssembly 等多线程技术来提高 JavaScript 的执行性能。
4. 避免内存泄漏和其他的内存管理问题，及时清理无用的资源。
5. 使用硬件加速和 GPU 渲染等技术来提高页面渲染性能。
   等等

typescript import和import type的区别？

两者的主要区别是：

• import：
• 可以在运行时访问导入的对象
• 编译结果包含导入语句
• import type：
• 仅用于类型检查，无法在运行时访问导入的对象
• 编译结果不包含导入语句，在编译后被删除

示例：

// import 
import { User } from './user';
let u = new User(); // 可以在运行时创建 User 实例

// import type
import type { User } from './user';
let u = new User(); // Error,无法创建 User 实例

编译结果：

"use strict";
// import 
var User_1 = require("./user");
var u = new User_1.User(); 

// import type
let u = new User(); // Error

test和includes哪个性高更高？

在 JavaScript 中，test() 方法和 includes() 方法都是用于字符串的匹配操作。它们的区别如下：

1. test() 方法是 RegExp 对象的方法，用于检测字符串是否与指定的正则表达式匹配。返回值为 true 或 false。

2. includes() 方法是字符串对象的方法，用于检测一个字符串中是否包含另一个字符串。返回值为 true 或 false。

在性能方面，includes() 方法的性能更高，因为它是字符串对象的本地方法，执行效率更快；而 test() 方法需要先将正则表达式编译成 RegExp 对象，再进行匹配，相对较慢。但是，在进行匹配时，如果需要使用复杂的正则表达式，test() 方法可能会更加灵活和可控。

字符串转数字哪种方式性能最高？

测试数据，每秒操作数：

• Number(str)：150,000 ops/sec
• +str：148,000 ops/sec
• parseInt(str)：120,000 ops/sec
• parseFloat(str)：125,000 ops/sec

可以得出：

• Number(str) / +str：性能最高
• parseInt(str) / parseFloat(str)：性能稍差，但更标准