[分享]前端开发文档

久久在线

发布于 2024-12-09 16:29:42

172

Mixin合并在数据的property发生冲突时，会以组件自身的数据优先data函数属性合并生命周期钩子合并，先调用Mixin，再调用组件自身methods、component和directive等值...

Mixin合并

在数据的property发生冲突时，会以组件自身的数据优先

data函数属性合并
生命周期钩子合并，先调用Mixin，再调用组件自身
methods、component和directive等值为对象的合并
自定义选项合并

定义合并策略：

const app = Vue.createApp({
    minxins:[myMixin],
})

app.config.optionMergeStrategies.custom=(toVal, fromVal) => {
    return toVal || fromVal;
}

Vite在开发环境基于浏览器原生ES6 Modules开发，在生产环境基于Rollup打包。

快速冷启动
即时模块热更新
真正的按需编译
Electron
node-red-流程引擎
消息传递是通过在独立的线程之间共享对象或数据的某种序列化表示来实现
通过使用worker_threads可以在两个不同的JS实例之间共享内存。通过创建SharedArrayBuffer实例，并使用与工作线程消息传递相同的postMessage(value)方法将其从一个线程传递到另一个线程来完成。这个过程会产生一个字节数组，两个线程可以同时对其进行读写
事件循环，管理用于触发回调和运行应用的事件队列
process.nextTick()，promise,微任务队列中的回调优先于各阶段正常队列中的回调，微任务队列下一个循环tick中的回调在promise微任务队列中的回调之前运行
重构虚拟DOM模块（静态提升）
基于Proxy的响应式对象
事件缓存
Tree Shaking支持
TypeScript和monorepo代码组织
组合式API
Vite工具
标记静态内容，并区分动态内容（静态提升）
更新时只diff动态的部分
事件缓存对象cacheHandlers
打包构建的资源更小
Tree Shaking移除JavaScript上下文中未引用代码

首屏资源加载优化（4点）：

剥离首屏资源：非首屏资源单独合并、懒加载
按需加载：Webpack Code Splitting、首屏非必要资源
非首屏图片懒加载：页面滚动时动态载入图片
CDN加速：

预加载（2种）

对页面资源进行预先拉取或加载：DNS预解析（DNS pre-resolution）<link rel="preload">、<link rel="prefetch">
对WebView或关键数据进行预加载

渲染优化

16ms优化

重绘和重排

requestAnimationFrame和requestIdleCallback

长列表滚动优化

GPU

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeUnmount
unmounted
activated
deactivated
renderTriggered
renderTracked
errorCaptured

`errorCaptured`

在捕获一个来自当前子孙组件的错误时被触发，当前组件报错不会触发。这里的报错一般只会限制在当前Vue根实例下代码所抛出的DOMException或者异常Error对象（new Error()）等错误。在某个子孙组件的errorCaptured返回false时，可以阻止该错误继续向上传播。

Content-Type：指定内容类型
location：将客户端重定向到另一个url地址
Cache-Control：开启缓存机制
Expires：指定缓存过期时间
Etag：指定当服务器端响应内容没有变化时不重新下载数据

// 获取两个日期之间的所有日期（包括自身）
export const getAllDates = (start, end) => {
  const dateList = [];
  let startDate = Date.parse(new Date(start));
  let endDate = Date.parse(new Date(end));
  let days = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24));
  for (let i = 0; i <= days; i++) {
    let date = new Date(startDate + i * 24 * 60 * 60 * 1000);
    dateList.push(date.toLocaleDateString());
  }
  return dateList;
};

// 获取两个日期之间的所有星期（包括自身）
export const getAllWeeks = (days, start, end) => {
  let weekList = [];
  let filterWeeks = [];
  let weeks = [
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
    "星期日",
  ];
  let result = [];
  const dateList = getAllDates(start, end);
  dateList.map((date) => {
    let week = new Date(date).getDay();
    weekList.push(week == 0 ? 7 : week);
  });
  weekList = Array.from(new Set(weekList));
  filterWeeks = days.filter((day) => !weekList.includes(Number(day)));
  filterWeeks.map((week) => result.push(weeks[week - 1]));
  return result;
};