# 基本范例

<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

<script>
  import { reactive, computed } from 'vue'

  export default {
    setup() {
      const state = reactive({
        count: 0,
        double: computed(() => state.count * 2),
      })

      function increment() {
        state.count++
      }

      return {
        state,
        increment,
      }
    },
  }
</script>

# Vue 组合式 API

# setup

—— 先学习 Vue2.x

• Vue3.0 并不是推倒从来，很多 2.x 内容依然被保存

—— 先学习 Typescript

• Vue3.0 采用 TS 重写，必须学 TS

# 一、Vue3.0 的六大亮点

1. Performance：性能比 Vue2.x 快 1.2 ～ 2 倍
2. Tree shaking support：按需编译，体积比 Vue2.x 更小
3. Composition API *：组合式 API（类似 React Hooks）
4. Better Typescript support：更好的 TS 支持
5. Custom Renderer API：暴露了自定义渲染 API
6. Fragment，Teleport（Protal），Suspense：更先进的组件

# 二、Vue3.0 是如何变快的

Vue3 源码编译工具：Vue3 模版编译工具

Vue2.x 模版编译工具：Vue2.x 模版编译工具

# 1、diff 方法优化

• Vue2 中的虚拟 DOM 是进行全亮的对比
• Vue3 新增了静态标记（PatchFlag）
  • 在与上次虚拟节点进行对比的时候，只对比带有 patch flag 的节点
  • 并且可以通过 flag 的信息得知当前节点要对比的具体内容

<div id="app">
    <h1>技术摸鱼</h1>
    <p>今天天气真不错</p>
    <div>{{name}}</div>
</div>

--------------------

import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("div", { id: "app" }, [
    _createVNode("h1", null, "技术摸鱼"),
    _createVNode("p", null, "今天天气真不错"),
    _createVNode("div", null, _toDisplayString(_ctx.name), 1 /* TEXT */),
    _createVNode("div", {
      class: {red:_ctx.isRed}
    }, "摸鱼符", 2 /* CLASS */),
    _createVNode("button", { onClick: _ctx.handleClick }, "戳我", 8 /* PROPS */, ["onClick"])
  ]))
}

# 2、hoistStatic 静态提升

• Vue2 中无论元素是否参与更新，每次都会重新创建
• Vue3 中对于不参与更新的元素，只会被创建一次，之后会在每次渲染时被不停的复用

<div id="app">
    <h1>技术摸鱼</h1>
    <p>今天天气真不错</p>
    <div>{{name}}</div>
    <div :class="{red:isRed}">摸鱼符</div>
    <button @click="handleClick">戳我</button>
</div>


--------------------------------------


import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"

const _hoisted_1 = { id: "app" }
const _hoisted_2 = /*#__PURE__*/_createVNode("h1", null, "技术摸鱼", -1 /* HOISTED */)
const _hoisted_3 = /*#__PURE__*/_createVNode("p", null, "今天天气真不错", -1 /* HOISTED */)

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("div", _hoisted_1, [
    _hoisted_2,
    _hoisted_3,
    _createVNode("div", null, _toDisplayString(_ctx.name), 1 /* TEXT */),
    _createVNode("div", {
      class: {red:_ctx.isRed}
    }, "摸鱼符", 2 /* CLASS */),
    _createVNode("button", { onClick: _ctx.handleClick }, "戳我", 8 /* PROPS */, ["onClick"])
  ]))
}

// Check the console for the AST

# 3、cacheHandlers 事件侦听器缓存

• 默认情况下 onClick 会被视为动态绑定，所以每次都会去追踪它的变化
• 但是因为是同一个函数，所以没有追踪变化，直接缓存起来复用即可

<div id="app">
    <button @click="handleClick">戳我</button>
</div>



----------------------------------------


import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue"

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("div", { id: "app" }, [
    _createVNode("button", {
      onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.handleClick(...args)))
    }, "戳我")
  ]))
}

// Check the console for the AST

# 4、SSR 渲染

• 当有大量静态的内容的时候，这些内容会被当作纯字符串推进一个 buffer 里面；即使存在动态绑定，会通过模版值嵌入进去，这样会比通过虚拟 dom 来渲染快上很多很多
• 当静态内容大到一定的量级时候，会用_createStaticVNode 方法在客户端去生成一个 static node，这些静态 node，会被直接 innerHtml，就不需要创建对象，然后根据对象渲染

import {
  createVNode as _createVNode,
  openBlock as _openBlock,
  createBlock as _createBlock,
} from "vue";

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (
    _openBlock(),
    _createBlock("div", { id: "app" }, [
      _createVNode("h1", null, "技术摸鱼"),
      _createVNode("p", null, "今天天气真不错"),
    ])
  );
}

SSR------------------------------ - SSR;

import { mergeProps as _mergeProps } from "vue";
import {
  ssrResolveCssVars as _ssrResolveCssVars,
  ssrRenderAttrs as _ssrRenderAttrs,
} from "@vue/server-renderer";

export function ssrRender(
  _ctx,
  _push,
  _parent,
  _attrs,
  $props,
  $setup,
  $data,
  $options
) {
  const _cssVars = _ssrResolveCssVars({ color: _ctx.color });
  _push(
    `<div${_ssrRenderAttrs(
      _mergeProps({ id: "app" }, _attrs, _cssVars)
    )}><h1>技术摸鱼</h1><p>今天天气真不错</p></div>`
  );
}

// Check the console for the AST

🚀 欢迎 Star ，后续会不断更新。
🇨🇳 最后更新日期：2️⃣0️⃣2️⃣0️⃣ / 0️⃣9️⃣ / 1️⃣9️⃣

【2020】 ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡--------------- 【2021】

Twitter vue3: vue 3 will be available by the end of Q2.

9 月 18 日星期五，Vue 的作者尤雨溪发表主题演讲，正式发布 Vue3.0 并回应一些大家关切的问题。表示不建议大家立刻升级到 Vue3.0 版本，之前项目中某些依赖项可能还不支持新版，等社区完善后再进行迁移也不迟。

Vue3.0 正式发布，尤雨溪在线全球发布会：【戳这里】

想了解更多有关 Vue 3.0 的信息，请大胆访问：v3.vuejs.org

除了单独 Vue3 资讯，欢迎查看更多 vue.js 资讯：【【🔥Vue.js 资讯 📚】目前 web 前端开发非常火爆的框架；定时更新，欢迎 Star 一下。】

# 目录

• 下半年撸 vue3 的霸气姿势
• Vue 3 Cheat Sheet
• 再谈 vue3
• 尤大推出 vue3 beta 之后
• 迎接 Vue3.0 系列
• 最新资讯 - 继续前进 ╰(°▽°)╯
• 英文资料
• 2019 年中旬
• 2019 年上旬
• 2018 年预告

🐣 关于旧版本

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

🐥Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

🐓Vue 3.0 源代码

当大多数国人还在庆祝国庆节的时候，尤雨溪大大在昨天凌晨发布了 Vue 3.0 源代码，源码地址：https://github.com/vuejs/vue-next 。虽然目前还 处于 Pre-Alpha 版本，但是可以预见后面的 Alpha、Beta 等版本应该不会太遥远。
之前，就有预言，除了性能优化、脚手架和新功能外，TypeScript 绝对是一个重点，因此，在 Vue 3.0 源代码版本中，98% 代码由 Typescript 编写，相信后面会是 100%。
通过本次发布的源代码可以了解到针对 Vue 3 计划并已实现的主要架构改进和新功能。
Vue 3 中最主要的新特性：组合式 API，已经可以借助 https://github.com/vuejs/composition-api （在 Vue 2 项目中作为插件使用）体验到。

yyx990803

v3.0.0 One Piece

Today we are proud to announce the official release of Vue.js 3.0 “One Piece”. This new major version of the framework provides improved performance, smaller bundle sizes, better TypeScript integration, new APIs for tackling large scale use cases, and a solid foundation for long-term future iterations of the framework.

One Piece. Vuejs 3.0 正式版发布！代号：海贼王

---

进入了 rc 版本阶段：

3.0.0-rc.12 (2020-09-16)
…
3.0.0-rc.1 (2020-07-17)

– Alpha (α)：预览版，或者叫内部测试版；一般不向外部发布，会有很多 Bug；一般只有测试人员使用。
– Beta (β)：测试版，或者叫公开测试版；这个阶段的版本会一直加入新的功能；在 Alpha 版之后推出。
– RC (Release Candidate)：最终测试版本；可能成为最终产品的候选版本，如果未出现问题则可发布成为正式版本。

多数开源软件会推出两个 RC 版本，最后的 RC2 则成为正式版本。
我们的 vue3 就不一样，慢慢来，好东西，就要慢慢品！

3.0.0-beta.20 (2020-07-08)
@ github-actions released this 5 days ago · 37 commits to master since this release Please refer to CHANGELOG.md for details.

…

v3.0.0-beta.2
released this 6 days ago · 29 commits to master since this release
release: v3.0.0-beta.2

v3.0.0-beta.1
released this 7 days ago · 40 commits to master since this release
release: v3.0.0-beta.1

🔥🐔2020 前端面试秘籍

【吐血整理清单一】前端面试全攻略，为您保驾护航，金三银四
【吐血整理清单二】前端面试全攻略，为您保驾护航，金三银四
【吐血整理清单三】前端面试全攻略，为您保驾护航，金三银四

秘籍在手，天下我有； 只要你想进，那么世界就是你的。

🐔 前端整理之道

【整理】前端优化得有个好手段，比如看这个清单 🍑🍒🍓🍆🌽
【整理】前端学习笔记总结清单，应有尽有 🍇🍈🍉🍊🍋

🦃 关于 TypeScript

【2020-Q1-News】TypeScript 新鲜一波流，自己品尝？
【最新】TypeScript 梳理知识点列表，可否一战？
【必会】都已经 9102 年底了，你必须会 TypeScript。

为什么要学习它？
因为：

• 按需输出 JavaScript 版本
• 代码标准化利于团队开发
• 主流框架及最新特性的支持
• 便于重构和主流 IDE 支持
• 更多友好特性和检测
  …

哈哈哈，并不是，是因为都已经 2020 了，大公司和你们都在用。

# Vue3-CheatSheet

由 Vue Mastery 网站归纳的 Vue 3 Cheat Sheet， 直观地概况了其主要特性。

Vue3 Cheat Sheet	Vue3 Cheat Sheet

# vueuse

antfu/vueuse

like React hooks.
Collection of essential Vue Composition API utils works for Vue 2.x and 3.x https://vueuse.js.org/

Collection of essential Vue Composition API (inspired by react-use)

🚀 Features

• ⚡ 0 dependencies: No worry about your bundle size
• 🌴 Fully tree shakable: Only take what you want
• 🦋 Type Strong: Written in Typescript
• 🕶 Seamless migration: Works for both Vue 3 and 2
• 🌎 Browser compatible: Use it though CDN
• 🎪 Interactive docs & demos: Check out the Storybook!
• 🔌 Optional Add-ons: Firebase, vue-i18n, etc

# 💃🏻 下半年撸 vue3 的姿势 💃🏻

🐯 🦁 🐮 🐷 🐹 🦊

霸气姿势观望 vue3 核心技术 ing

• Proxy：不只是解决了 defineProperty 的局限性。
• Performance：性能更比 Vue 2.0 强。
• Tree shaking support：可以将无用模块 “剪辑”，仅打包需要的。
• Composition API：组合 API。
• Fragment, Teleport, Suspense：“碎片”，Teleport 即 Protal 传送门，“悬念”。
• Better TypeScript support：更优秀的 Ts 支持。
• Custom Renderer API：暴露了自定义渲染 API。

TODOLIST：

• 1 Docs & Migration Guides
• 2 Router
• 3 Vuex
• 4 CLI
• 5 新工具：vite（法语 “快”）
• 6 vue-test-utils
• 7 DevTools
• 8 IDE Support (Vetur)
• 9 Nuxt

介绍 Vue.js 以及 Vue-next 源码分析文章，希望通过学习 Vue.js 源码获得更好的知识和收获。
【这是入口】你要找的 vue 源码 全宇宙的都在这！

「我是要成为海贼王的男人」

• 【李南江】Vue3.0 正式版教程 2020 年 9 月 19 号全网首发 - Vue3 One Piece 持续更新中…
• Vuejs 3 Release：One Piece. Vuejs 3.0 正式版发布！代号：海贼王
• Vue3.0 正式发布，本次发布所有总结，一起看看！

vue => Q3 2020

3.0: Release Management

• Regression testing for 3.0

• Automated nightly release

• Formalize release lifecycle

• setup CLA process

  3.0: IE11 compat build
  3.0 Official Release

  2.7

• Backport compatible 3.x features to 2.x

• Deprecation warnings for 3.x changes

• This will be the last minor release for 2.x and be offered as LTS (long-term support) for 18 months. It will continue to receive critical security updates even after the LTS period.

Vue 3 Deep Dive with Evan You 【中英字幕】- Vue Mastery
课程中提到的预备课程是《Vue3 响应式原理》

• Vue 之父尤雨溪深度解读 Vue3.0 的开发思路（上）
• Vue 之父尤雨溪深度解读 Vue3.0 的开发思路（中）
• Vue 之父尤雨溪深度解读 Vue3.0 的开发思路（下）

里面评论区和弹幕有在调侃尤大大的：

=》尤雨溪就是个写前端的，懂什么 vue！
=》你一点都不懂 vue
=》他懂个锤子的 vue
=》他根本不懂 vue

=> 兄弟姐妹们，你们的饿了么升级为 vue3 了，在紧急构建中，很多大佬都在。
【🎉 A Vue.js 3.0 UI Library element-plus.org/】

• A Vue.js 3.0 UI Toolkit for Web.（WIP）
• vue 3 组件库（基于 element-ui 修改）
• blacksonic/awesome-vue-3
• Vue 3.0 初学入门使用
• Vue3 源码入门，实现简易版 reactivity
• Vue3.x API config
• vue3 最美餐厅点餐系统 APP
• Vue3 设计背后的思考
• 用 Vue3 写一个 swipe-cell
• 尝鲜 vue3.0-tyepscript 开发组件 (3)
• 首个 Vue 3 组件库发布
• Learn the fundamentals of Vue 3 in this course that starts with the very basics.
• Creates Universal Library for Vue 2 & 3
• Vue 3 Playground packed with all the new features
• A curated list of awesome things related to Vue 3
• vue3 项目–让我们更快开发 vue（一）
• vue3 项目–让我们更快开发 vue（二）
• Vue3 面向对象编程
• Vue3 reactivity 这个地方是不是循环引用了？
• Vue3 Compiler 优化细节，如何手写高性能渲染函数
• vue3 列表渲染
• vue3 Event 事件处理
• vite+vue3.x
• 期待已久的鹅厂面试题来咯，Vue3 实现递归菜单组件
• 快速了解 vue 3.x
• 基于 Vue3+ElementUI-BootStrap4_前端实战
• vue3 项目打包 app
• vue3-reactive (响应式对象) 和 toRefs
• [译] Vue 3 迁移策略 —— 过滤器（移除）
• Vue3.0 全家桶最全入门指南 - 快速搭建 (1/4)
• Vue3.0 全家桶最全入门指南 - vue3.0 新特性 (2/4)
• Vue3.0 全家桶最全入门指南 - vue-router@4.x 和 vuex@4.x (3/4)
• Vue3.0 全家桶最全入门指南 - 3.x 跟 2.x 的其他差异 (4/4)

从 Vue 2 到 Vue 3 的迁移指南

• 从 Vue 2 到 Vue 3 的迁移指南之破坏性特性（一、全局 API）

• 从 Vue 2 到 Vue 3 的迁移指南之破坏性特性（二、全局 API 的 tree-shaking）

• 从 Vue 2 到 Vue 3 的迁移指南之破坏性特性（三、v-model）

• 从 Vue 2 到 Vue 3 的迁移指南之破坏性特性（四、渲染函数 API）
  🐬🐘🦒🐏🦥🦍
  翻译官网文档列表如下:

• vue3 指南 —01 安装

• vue3 指南 —02 介绍

• vue3 指南 - 03 应用实例

• vue3 指南 - 04 Template Syntax template 语法

• vue3 指南 —05 Computed 属性 (property) 和侦听器

• vue3 指南 - 06 Class and Style Bindings 类名和样式值绑定

• vue3 指南 - 07 Conditional Rendering 条件渲染

• vue3 指南 - 08 List Rendering 列表渲染

Vue 组合式 API

• Be prepared to migrate your Vue app to Vue 3
• How to test your library for Vue 2.x and Vue 3.0
• GitHub - blacksonic/awesome-vue-3
• GitHub - nkoehring/vue3-typescript-app-starter
• Vue 3 UX Wins with Async Components & Suspense
• Handling Asynchrony in Vue 3 / Composition API — Part 1: Managing Async state
• Build better higher-order components with Vue 3
• Vue3.0 中的性能优化
• Vue3 + Element ui 后台管理系统
• Vue3.0 数据响应式原理详解
• 学习 Vue3.0，你需要先了解一下 Proxy
• 学习 Vue3.0，先从搭建环境开始
• vue3 源码全面解读
• 浅谈 Vue3 的 watchEffect 用途
• vuetify 正在开发的 v3 分支，ts + vue3
• vue3 源码学习 ——computed
• vue3 源码学习 —— 响应式 reactive
• Vue 3.x 组件式 API
• Vue3.0 + Vite 使用 Bootstrap
• Vue3 模板编译原理
• VUE3 来了，你用了 NestJS 了吗？（一）
• 程序员为什么要学习源码 | Vue3 源码系列开篇词
• [Vue3 + TS + Egg 重构自己的小项目总结]
• vue3+Ts 可视化开发的研究，实战拖拽基础，组件动态生成，远程加载组件
• Vue3.0 变动简介
• [使用 Vue3 构建更好的高阶组件译]
• Vue3 响应式原理剖析
• 进阶高级前端，这 9 种 Vue 技术你掌握了吗？
• Vue3 教程，抢先学习
• Vue3 composition-api 有哪些劣势？
• Vue3 文档【Vue2 迁移 Vue3】
• vue3.x reactive、effect、computed、watch 依赖关系及实现原理
• Vue 最全知识点（基础到进阶，覆盖 vue3.0，欢迎补充讨论）
• Vue3.0 浪潮下，没有一个平庸的程序员是无辜的，此刻，你需要把握这些？
• vue3 + router + tsx + vite 试用报告
• 学习 vue3 系列 watch
• 使用 Vue3 构建更好的高阶组件译
• 紧跟尤大的脚步提前体验 Vue3 新特性，你不会还没了解过 Vue3 吧
• 使用 Vue 3.0，你可能不再需要 Vuex 了
• 使用 vite 搭建 Vue3 项目
• Vue3 相对于 2 系列的升级（一）
• vue3 为何放弃 defineProperty，使用 Proxy
• Go async in Vue 3 with Suspense
• How to test your library for vue 2 and vue-next
• A Month with Vue 3
• Shared State Management with Vue Composition Api
• A store implementation from scratch using Vue3’s composition API
• Headless Testing with Vite + Vue-Test-Utils
• VueJS Quick Tip: Vue-router-next in the Composition API
• Be prepared to migrate your Vue app to Vue 3
• Do Vue 3 refs admit a monad instance?
• Vite - No Bundle Setup for Vuejs, React and Preact
• vue3.0 搭建教程 (ui 界面创建项目，帮你快速搭建所需模块，非常 nice)
• 大前端：前端全栈加强版！前端全栈 + 全周期 + 多端 (升级 Vue3.0) 完整版
• 官方给出的 Vue3 性能优化数据，其实很保守？
• A babel plugin that provides jsx syntax for vue3
• 高级前端开发成长路线总结 - 进阶指南
• sl1673495 前端技术博客，不定时更新
• Taro 中实现 Vue 3 的支持
• vue3-think 记录学习思考 vue3 的所有
• Vue3 Demo: Roll the dice
• vue3.0 实战喵喵电影
• vue-design 渲染器 - 江山父老能容我 不使人间造孽钱
• vue3 Roadmap
• Vue3 响应式原理 + 手写 reactive
• Vue 3 到底有什么不同：v-model 升级了
• Vue 3 到底有什么不同：全局 API
• Vue2.x 与 Vue3 响应式实现核心代码对比
• 深入 TypeScript 中的子类型、逆变、协变，进阶 Vue3 源码前必须搞懂的。
• 【译】为什么不需要在 Vue3 中使用 Vuex
• Vue3.0 源码解析之组件渲染，vnode 到真实 DOM
• 一文看懂 Vue 3 到底有什么不同
• Vue3 响应式原理

🚴🏻 🚴🏻‍♂️ 🚴🏻‍♀️ 🚵🏻 🚵🏻‍♂️ 🚵🏻‍♀️

vue3.0 Composition API 入门教程

vue3.0 Composition API 上手初体验 构建基本项目开发环境
vue3.0 Composition API 上手初体验 构建 vue 基础代码
vue3.0 Composition API 上手初体验 使用 vue-router 构建多页面应用
vue3.0 Composition API 上手初体验 神奇的 setup 函数 (一) 响应数据的绑定
vue3.0 Composition API 上手初体验 神奇的 setup 函数 (二) 响应对象数据的绑定
vue3.0 Composition API 上手初体验 神奇的 setup 函数 (三) 生命周期函数
vue3.0 Composition API 上手初体验 神奇的 setup 函数 (四) 计算属性 computed
vue3.0 Composition API 上手初体验 普通组件的开发与使用
vue3.0 Composition API 上手初体验 vue 组件的具名插槽 slot 的变化
vue3.0 Composition API 上手初体验 函数组件的开发与使用
vue3.0 Composition API 上手初体验 用路由循环，做个导航菜单

李金文 /vue-next 学习

vue-next 贡献指南（谷歌翻译版）
《Vue3.0 抢先学》系列之：网友们都惊呆了！
《Vue3.0 抢先学》系列之：一个简单的例子
《Vue3.0 抢先学》系列之：使用 Composition API
《Vue3.0 抢先学》系列之：响应式之 Ref vs. Reactive
《Vue3.0 抢先学》系列之：使用 render 函数
《Vue3.0 抢先学》vue-next 学习总结
《Vue3.0 抢先学》系列之：组件属性 Props
《Vue3.0 抢先学》系列之：组件生命周期
《Vue3.0 抢先学》系列之：更多响应式 API 示例（watch,computed 的变种）

• 如果 ElementUI 不维护了，也不再支持 Vue 3 了我们该怎么办呢？
• Vue3.x 深入浅出系列（连载三）
• 基于 Vue3.0 开发知乎日报实战
• Vue3 全家桶 + Vite + TS + TSX 尝鲜，先人一步！
• 也许是最清楚的 Vue3.x Reactive 响应式原理讲解
• Vue 3.0 初步使用和原理
• 千字文看 Vue3.0 变化
• vue3 响应式数据最全最细致解析，vue3 源码解析持续更新中
• 除了 composition API，vue3.0 文档又带来了什么新东西？
• 从 Vue 源码中学到的 28 个编程好习惯
• Vue3 Composition API 教程及示例
• 基于 vue3.0.1 beta 搭建仿京东淘宝的电商商城项目！
• 细致分析，尤雨溪直播中提到 vue3.0 diff 算法优化细节
• 顺藤摸瓜：用单元测试读懂 Vue 3 watch 函数
• electron-vue 开发笔记（3）多窗口多页面入口配置
• 基于项目实战阐述 vue3.0 新型状态管理和逻辑复用方式
• Vue3 源码逐行解析
• Vue3 生态技术内幕
• Vue 响应式系统技术原理和 Vue3 响应式系统的优点
• Vue3 之 —— 和 Vite 不得不说的事
• Vue3 的 Proxy 能做到哪些精确的拦截操作？原理揭秘
• 顺藤摸瓜：用单元测试读懂 vue3 watch 函数
• 学习一波 Vue3 新特性
• 用 Vue.js 3 Composition API 创建 i18n 插件
• Vue 3.0 初探 – 组合式 API
• Vue 技巧 | 在 Vue3 中使元素在滚动视图时淡入
• Vue1.x 2.x 3.x 的响应式实现
• 深入理解 Vue3 Reactivity
• Vue 3.x 项目环境搭建
• 好消息，Vue3 官方文档出中文版的啦
• 深入理解 Vue3 Reactivity API
• vue 3.x 如何高效学成？本文详解
• [vue 源码 03] watch 侦听属性 – 初始化和更新
• Vue 技巧 | 在 Vue3 中使元素在滚动视图时淡入
• Vue3 Reactivity API 基础
• Vue 3 响应式原理及实现
• vue3 响应式系统流程分析与实现
• The process: Making Vue 3
• vue3.0 beta 已出，来快速实践一下吧
• 尤雨溪：重头来过的 Vue 3 带来了什么？
• vue3.0 创建项目及 API 讲解（一）
• Vue 3 教程（适用于 Vue 2 用户）
• 循序渐进 VUE+Element 前端应用开发 (4）— 获取后端数据及产品信息页面的处理
• 「中文翻译」Vue3 的诞生之路
• 1.1 万字从零解读 Vue3.0 源码响应式系统
• Vue Global Meetup, Tue, Apr 14, 2020 at 5:00 PM
• New Async Component API by yyx990803 · vuejs/rfcs · Vue 3.0
• How the Vue Composition API Replaces Vue Mixins – Anthony Gore – CSS-Tricks
• Vue 3.0 Changes for @Component decorator and Vue base class · vuejs/vue-class-component
• Release v0.5.0 · vuejs/composition-api · GitHub
• VueConf US 2020 – Vue Mastery
• Vue.js Amsterdam 2020 - YouTube
• Vue.js Headless Component - Frederik Dietz
• Vue.js Functional Components - Frederik Dietz

What you will love in Vue 3
Prepare yourself for what to expect in Vue 3 with Alex Kyriakidis’ presentation from the Vue.js Amsterdam conference.

GitHub - vuejs/vite: Make Web Dev Fast Again
Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.

Vue.js 3 Course - Composition API, TypeScript, Testing
Vue.js 3 introduces some changes to the Async Component API - find out the changes, and how you can use Async Components with Webpack 5’s bundle splitting to make your apps load faster than ever.

The case for HOC vs The Composition API
In this article Abdelrahman compares Higher-Order Components (using scoped-slots?content_source_url=https://github.com/vue3/vue3-News) with the upcoming Composition API. I especially enjoyed the Vee-Validate v4 comparison. Check it out!

Vuetensils 0.6: Simpler Forms, Better Accessibility, & Useful Filters!
The latest version of Vuetensils has some really cool features: improvements to form authoring, accessibility updates, and new filters to make life easier.

GitHub - vuejs/vitepress
GitHub - Akryum/vue-mention
GitHub - alvarosaburido/vue-dynamic-forms

# 再谈 vue3

• Vue 源码学习 3.9：深入 Props
• 真・vue3.0 全家桶 + ts 尝鲜、过坑
• 超级详细的 Vue-cli3 使用教程
• 15 分钟上手 vue3.0
• Vue-cli3.0 读取外部化配置文件来修改公共路径
• vue3.x 结合 typescript 初体验
• 几道我今年跳槽遇到的 Vue3.0 面试题
• Vue3 源码分析 —— 数据侦测
• 记一次 vue3.0 技术分享会
• Vue3 源码解析 —— 整体流程和组合式 API
• Vue2.x To Vue3.0
• 搭建一个 vue-cli4+webpack 移动端框架（开箱即用）
• vue3.0 实战从 0 到 1 实战电商管理系统（第三天）
• 简明扼要聊聊 Vue3.0 的 Composition API 是啥东东
• Vue (2.x 和 3.0?content_source_url=https://github.com/vue3/vue3-News) 双向绑定原理及实现（Object.defineProperty 和 Proxy）以及常见错误区分
• vue3.0 实战电商系统：高解耦式 mock 订单列表查询（第四天）
• 如何在 Vue 3 中使用生命周期函数
• Vue3.0 中 Object.defineProperty 的代替方案 Proxy
• Vue 3 中的 Vue Router 初探
• 搭建一个 vue-cli4+webpack 移动端框架（开箱即用）
• 通过 10 个实例小练习，快速入门熟练 Vue3.0 核心新特性
• Vue3 究竟好在哪里？（和 React Hook 的详细对比）
• 使用 Vue3 composition-api 重写一个抽象可复用的增删改查页面
• Vue 源码学习 3.8：组件更新 & diff 算法
• 一份关于 vue-cli3 项目常用项配置
• vue-cli4 从零开始搭建 Vue 项目
• 手拉手带你开启 Vue3 世界的鬼斧神工
• vue3.0 从 0 到 1 实战电商管理系统（第一天）
• vue3.0 实战从 0 到 1 实战电商管理系统（第三天）
• Vue CLI3 移动端适配 【px2rem 或 postcss-plugin-px2rem】
• 告别无聊的 undefined 判断，让老 vue-cli3 支持 🚀"可选链" 等 "ES2020" 特性
• Vue 的’奇技淫巧’
• 基于 vue3.0+TypeScript 的简易日历
• vue3.0 尝鲜，写一个 win10 日历
• 手拉手带你开启 Vue3 世界的鬼斧神工
• Vue3.0 直播虚拟 Dom 总结 (和 React 对比？content_source_url=https://github.com/vue3/vue3-News)
• Vue3.0 Beta 笔记（侧重 Performance 提升原因和 Composition API）
• Vue Cli 3 打包配置–自动忽略 console.log 语句
• 尤雨溪在 vue3.0 bate 上推荐的 no webpack 小工具 vite
• 尤雨溪谈 Vue3.0 新特性直播后的个人理解
• Vue3 使用学习
• Vue3.0 Beta–有牛优刘尤老师上课笔记
• Vue 3.0 bate 版尝鲜
• Vue3 中对 VDOM 的改进
• 一份 vue3-beta.3 相关文集前来报告，请您收下
• 如何在 Vue2 与 Vue3 中构建相同的组件
• Vue 3-beta 相关文集
• Vue CLI3 移动端适配 【px2rem 或 postcss-plugin-px2rem】
• 迎接 Vue 3.0：在 Vue 2 与 Vue 3 中构建相同的组件

# 尤大推出 vue3 beta 之后

🍁 🍄 🌾 💐 🌷 🌹 🥀 🌺 🌸 🌼 🌻
各位亲 (づ￣ 3 ￣) づ ╭❤ ～，悠着点、悠着点。
🍁 🍄 🌾 💐 🌷 🌹 🥀 🌺 🌸 🌼 🌻

vue 官方提供的尝鲜库：https://github.com/vuejs/composition-api

• 抄笔记：尤雨溪在 Vue3.0 Beta 直播里聊到了这些…
• 尤大 Vue3.0 直播虚拟 Dom 总结 (和 React 对比)
• Vue 3.0 这个迷人的小妖精，到底好在哪里？（更新原理对比）
• 技术周刊 2020-04-21：Vue 3.0 Beta 来啦！
• 抄笔记：尤雨溪在 Vue3.0 Beta 直播里聊到了这些…
• vue3.0 Beta 发布了
• 好消息，vue 3 进入 beta 阶段！
• 今日凌晨 Vue3 beta 版震撼发布，竟然公开支持脚手架项目！
• vue cli3 适配所有端方案
• Vue 3.0 Beta 版本发布，你还学的动么？
• Vue 3.0-beta.1 发布
• 好消息，vue 3 进入 beta 阶段
• vue3 reactive 思路引导
• Vue3 的响应式和以前有什么区别，Proxy 无敌？
• Vue3 跟着尤雨溪学 TypeScript 之 Ref 类型从零实现
• vue2.0 与 3.0 对比以及 vue3.0 API 入门
• Vue 3.0 全家桶抢先体验
• 解析 Vue2.0 和 3.0 的响应式原理和异同 (带源码)
• VUE 3.0 学习探索入门系列 - Vue3.x 生命周期 和 Composition API 核心语法理解（6）
• VUE 3.0 学习探索入门系列 - Vue3.x 令人期待的新特性（7）
• Vue3.0 (Vue-cli4) 项目打包性能优化实践
• Vue.js CLI4 Vue.config.js 标准配置 （最全注释）

# 迎接 Vue3.0 系列

👹 👺 💀 👻 👽 🤖

• 迎接 Vue3.0 系列 | Vue3 Composition API 中的提取和重用逻辑
• 迎接 Vue3.0 系列 | Vue Composition API 如何替换 Vue Mixins
• 准备迎接 Vue3，使用 Vue Composition API 生成干净可扩展的表单
• 迎接 Vue3.0 系列 | 如何在 Vue3 中使用生命周期钩子函数
• 迎接 Vue3.0 系列 | 如何在 Vue2 与 Vue3 中构建相同的组件
• 迎接 Vue3.0 系列 | Vue3 中的 Vue 路由器初探

# 最新资讯 - 继续前进 ╰(°▽°)╯

• 重拳出击：打造 Vue3.0 + Typescript + TSX 开 (乞) 发 (丐) 模式
• 10 个 Vue 开发技巧助力成为更好的工程师
• 2020 年的 12 个 Vue.js 开发技巧和窍门
• 高级前端开发者必会的 34 道 Vue 面试题解析（三）
• （4.2 万字 🔥🔥🔥 重启 2020）“从零到部署” Vue 全栈电商应用系列教程 — 正式完结
• Vue 进阶必学之高阶组件 HOC（保姆式教学，冲击 20k 必备）
• VUE CLI3 结合 cross-env 配置环境变量（含环境变量源码解析）
• 4k+ 字分析 Vue 3.0 响应式原理（依赖收集和派发更新）
• 解析 Vue2.0 和 3.0 的响应式原理和异同 (带源码)
• vue 刷新页面出现 404 错误
• 【你不知道的 React】当 React Hooks 遇见 Vue3 Composition API
• VUE 3.0 学习探索入门系列 – Vue3.x 令人期待的新特性（7）
• Vue3.0 的 reactive API 定义和源码实现
• 基于 vue-cli3 搭建一个后台管理系统框架
• Vue 3.0 diff 算法及原理
• 基于 vue-cli3/cli4 解决前端使用 axios 跨域问题
• 使用 vue-cli3 搭建 Vue+TypeScript 项目
• 简单通俗的理解 Vue3.0 中的 Proxy
• vue 源码分析 - 14-dom 异步更新机制 (nextTick)
• 谈谈 vue3.0 要更新的内容相关笔记
• Vue3.0 尝试
• vue3.0 源码速读
• 记一次 vue-cli3 webpack 简单性能优化
• 手摸手带你使用 Vue-Cli3 搭建前端开发环境
• vue2.x+vue-cli3.0 地图 demo 踩过的坑
• 用 Vue3 (Vue-Composition API) 写一个疫情查询小工具
• TypeScript 从零实现基于 Proxy 的响应式库，带你彻底搞懂 Vue3 的响应式原理
• 带你彻底搞懂 Vue3 的 Proxy 响应式原理基于函数劫持实现 Map 和 Set 的响应式
• 深度解析：Vue3 如何巧妙的实现强大的 computed
• 重拳出击：打造 Vue3.0 + Typescript + TSX 开 (乞) 发 (丐) 模式
• 在 React 中引入 Vue3 的 reactivity 分包来实现最强大的状态管理
• A dashboard scaffolding based on vue.js created by vuejs/vue-cli 4.x.
• vue-cli4 全面配置 (持续更新)
• 基于 vue-cli4 脚手架搭建的 cesium 所踩的坑
• Vue3 尝鲜
• Vue3 体验卡～
• 【思否编程公开课】限时免费 迎接 Vue 3.0
• Vue3 之 Composition API 对比 Vue2.x 用法
• 带你了解 vue-next（Vue 3.0）之 炉火纯青
• Vue 3.0 实践：使用 Vue 3.0 做 JSX (TSX) 风格的组件开发
• 带你了解 vue-next（Vue 3.0）之 小试牛刀
• 带你了解 vue-next（Vue 3.0）之 初入茅庐
• Vue3 Composition-Api + TypeScript + 新型状态管理模式探索
• Vue3 源码之响应系统 Reactive 模块解读 (干货满满，不容错过～)
• 从 vuecli3 学习 webpack 记录（零）整体流程
• Vue3 中不止 composition-api，其他的提案 (RFC) 也很精彩
• Evan You - What’s Coming in Vue.js 3.0 | Full Stack Radio
• Top ways to learn Vue 3 – Dan Vega
• Portal - a new feature in Vue 3 - Filip Rakowski
• Access template refs in Composition API in Vue.js 3
• Use old instance properties in Composition API in Vue.js 3
• Design Principles of Vue 3.0 – Evan You @VueConfTO 2019
• VUE 3.0 API 尝鲜体验
• Vue 3.x 响应式原理 ——ref 源码分析
• Vue 3.x 响应式原理 ——effect 源码分析
• Vue3 源码学习 (问题总结)
• Vue CLI3 搭建组件库并实现按需引入实战操作
• vue 3.0 pre-alpha
• [为 Vue3 学点 TypeScript, 什么是声明文件 (declare)? 全局声明篇]
• Vue 3.0 响应式方法解析
• 从 Object.defineProperty 到 Proxy 深入理解 Vue 3.0 响应系统
• Vue3.0 响应式系统二三事
• Vue 3.x 源码初探 ——reactive 原理
• Vue2.X 和 Vue3.0 数据响应原理变化
• Vue 3 对 Web 应用性能的改进
• Vue 3 中令人兴奋的新功能
• Vue.js 3.x 源码解析先导
• Vue 3 Cheat Sheet 下载（中文版）
• vue3 响应式源码解析 - Effect 篇
• Vue 3.0 —— Watch 与 Reactivity 代码走读
• Vue3.0 数据响应系统分析 (主要针对于 reactive)
• vue3 源码解读之 time slicing
• 茶余饭后聊聊 Vue3.0 响应式数据那些事儿
• Vue3 都要上的 TypeScript 之工程实践
• vue_cli3.x 跨域访问
• 【译】Vue.js 3: 面向未来编程
• 全面改革：解读 Vue 3.0 的变化
• 基于 vue3 function-based 构建 cnode 社区
• vue3.0 后台管理框架基于 typescript（支持 pc\ 手机，抖音 rank 数据分析、Tiktok 数据)
• 从 WebPack 4.X 到 Vue-Cli 3.X 一篇就够
• 从 vue2.0 响应数据到 vue3.0 响应数据
• Vue 3.0 源码逐行解析（一）：响应式模块（1）
• Vue3 数据驱动源码解读
• 看 vue3 源码可以学到什么：一 、README
• 你为什么看不懂源码之 Vue 3.0 囊中取物
• Vue 3 源码开放，今天你学习了吗？
• Vue 3.0 源码开放，看看都有哪些新特性
• Vue 3.0 公开代码之后……
• Vue3.0 响应式系统完全讲解 (逐行)
• Vue 3 原理剖析：数据响应系统
• Vue3.x 源码调试
• 为什么 Vue3.0 使用 Proxy 实现数据监听？defineProperty 表示不背这个锅
• Vue 3 响应式系统源码解析（单测篇）
• 浏览器中如何断点调试 Vue3 源码
• 简析 vue 3 的数据响应系统
• 代理模式 Proxy 和 Vue3 数据响应系统
• Vue3.0 数据响应式原理
• Vue3 响应式系统源码解析 (上)
• 一张图理清 Vue 3.0 的响应式系统
• Vue3 响应式系统源码解析 - Ref 篇
• 五分钟看懂 Vue3 - 数据绑定
• 浅析 Vue3 中的响应式原理
• vue3 的数据响应原理和实现
• 给 vue3 源码添加注释：数据响应式部分
• 浅析 Vue3 数据响应系统
• vue3 中 effect 与 computed 的亲密关系
• Vue3.0 中的 monorepo 管理模式
• Vue3 watch 函数执行过程
• Vue3.0 中的数据侦测
• 使用 Proxy 实现 Vue.js 3 中的响应式思想
• Vue 3.0 最新进展：Composition API
• 公布了尚处于 Pre-Alpha 状态的 Vue 3 源码

# 英文资料

• What’s New in vue-styleguidist 3.0
• Hooks are coming to Vue.js version 3.0
• what does vue 3 0 mean for web development
• A Vue.js app demonstarting various use cases for the new composition API
• Why the Composition API - Vue 3 Essentials – Vue Mastery
• Vue 3 – A roundup of infos about the new version of Vue.js - Made with Vue.js
• GitHub - LinusBorg/composition-api-demos: A Vue.js app demonstarting various use cases for the new composition API
• Thought on Vue 3 Composition API - reactive() considered harmful
• Architecting HTTP clients in Vue.js applications for efficient network communication
• 10 Free resources to kickoff your career as a Vue Developer
• 10 Vue Directives that make your dev lives easier!
• 10 Tips & Tricks to make you a better VueJS Developer
• 9 Projects you can do to become a Frontend Master in 2020

# 2019 年中旬

天王盖地虎，宝塔镇河妖

文章列表标题	介绍
I_am_a_placeholder_placeholder_placeholder	nothing
为 vue3 学点 typescript, 解读高级类型	第一课，体验 typescript; 第二课，基础类型和入门高级类型；第三课，泛型；第四课，解读高级类型；第五课，什么是命名空间 (namespace);
Vue 3.0：更快、更小、让开发者更轻松	在 11 月 14 日 - 16 日于多伦多举办的 VueConf TO 2018 大会上，尤雨溪发表了名为 “Vue 3.0 Updates” 的主题演讲，对 Vue 3.0 的更新计划、方向进行了详细阐述。
Vue 3.0 前瞻，体验 Vue Function API	最近 Vue 官方公布了 Vue 3.0 最重要的 RFC：Function-based component API，并发布了兼容 Vue 2.0 版本的 plugin：vue-function-api，可用于提前体验 Vue 3.0 版本的 Function-based component API。笔者出于学习的目的，提前在项目中尝试了 vue-function-api。
Vue 3.0 之前你必须知道的 TypeScript 实战技巧	很多人对 TypeScript 的使用还停留在基本操作上，其实 TypeScript 的特性非常强大，我们利用好这些特性可以有效地提高代码质量、加速开发效率，今天就介绍 9 个非常实用的 TypeScript 技巧或者特性.
Vue CLI 3.x 与 2.x 的区别	cli3 新增模式概念，每个模式在项目中都有对应的配置文件，项目启动时，对应的文件就会加载，与环境变量不同，一个模式可以包括多个环境变量。
Vue 3.0 RFC API 的实现	Vue3.0 的 RFC 已经发布了几个月了，Vue 底层几乎没有变动，还是沿用原来响应式的。所以一直在思考能不能使用现在的版本，实现 RFC 中的 API，直到看到了 Vue Function API 这个库，这个库让开发者提前尝鲜到了 RFC 中的 API，当然作为 RFC，所以最终 3.0 的 API 还是未知的，以及底层的实现也还未知。
Vue.js 3：面向未来编程（function-based API）	如果你在使用 Vue.js，那么可能知道这个框架的第 3 版就要出来了（如果你是在本篇文章发布后的一段时间看到这段话的话，我希望我的说法还是中肯的 😉）。新版本目前正在积极开发中，所以可能要加入的特性都可以在官方的 RFC（request for comments）仓库中看到：github.com/vuejs/rfcs 。其中有一个特性 function-api，将会在很大程度上影响我们未来 Vue 项目的编写方式。
来自 Vue 3.0 的 Composition API 尝鲜	前段时间，Vue 官方释出了 Composition API RFC 的文档，我也在收到消息的第一时间上手尝鲜。虽然 Vue 3.0 尚未发布，但是其处于 RFC 阶段的 Composition API 已经可以通过插件 @vue/composition-api 进行体验了。接下来的内容我将以构建一个 TODO LIST 应用来体验 Composition API 的用法。
vue-cli 3.0 脚手架，从入门到放弃（二）	想写好代码，和用好一个工具是离不开的， 一般我们使用的工具有 HuilderX,sublimetext3，vscode，webstorm 等，个人目前使用的是 hb，和 vscode，可以根据个人爱好各自选择，但一定要熟练。
vue-cli 3.0 脚手架，从入门到放弃（三）	来总结下流程， 从我们 npm run serve 开始，打开 localhost:8080 端口，首先会加载 index.html。然后去 app.vue 里查找路由组件，这是会调动 router.js 里的配置，选择首先要打开哪个文件，找到我们的那个 path：’/' 的页面，浏览器显示。完成。

# 2019 年上旬

不要叫我达芬奇

2019.01-2019.07

• 尤雨溪大大在 6 月 4 日的 Vue3.0 的技术分享
• 你了解 vue3.0 响应式数据怎么实现吗？
• Vue 3.0 前的 TypeScript 最佳入门实践
• Vue 3.0 的重大改动暴露了哪些问题
• 尤雨溪关于 VUE3.0 进展的重磅分享
• 提前使用 Vue 3.0 新特性，vue-function-api 尝鲜
• 为 vue3 学点 typescript (1), 体验 typescript
• 精读《Vue3.0 Function API》
• 为 vue3 学点 typescript, 基础类型和入门高级类型
• 揭秘 Vue 3.0 最具潜力的 API
• [面向未来编程，如何在 Vue2 中使用 Vue3 的语法实践篇]
• Vue CLI 3 项目构建基础
• 你了解 vue3.0 响应式数据怎么实现吗？
• 模拟 vue3.0 rfcs createComponent api 中的 props 类型推导
• Vue-cli 3.5.1 + Webstorm 使用手机访问演示页面
• 用 vue3 公开的思路从 0 实现最简化的 vue
• 在 WebStorm 中，配置能够识别 Vue CLI 3 创建的项目的别名 alias @
• 配置一个 vue3.0 项目
• 快速上手最新的 Vue CLI 3
• Vue-CLI 3.x 自动部署项目至服务器
• Vue-Cli 3.0 从 0 开始搭建项目（篇 1）
• 入手 vue-cli 3.x
• Vue-cli 3.5.1 + Webstorm 使用手机访问演示页面
• 关于 vue-cli 3 配置打包优化要点

# 2018 年预告

天寒之时必封初冬

# 1、Vue CLI 3 搭建 vue+vuex 最全分析

介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件： CLI：@vue/cli 全局安装的 npm 包，提供了终端里的 vue 命令（如：vue create 、vue serve 、vue ui 等命令） CLI 服务：@vue/cli-service 是一个开发环境依赖。

# 2、Vue.js 2 vs Vue.js 3 的实现

vue.js 核心团队已经讨论过将在 Vue3 实现的变化。虽然 API 不会改变，但是数据响应机制（译者注：对数据改变的监听和通知）发生了变化。这意味着什么呢，同时它对你意味着什么呢？

# 3、vue3.0 快速创建项目

vue3.0 使用了 cli3 快捷搭建的技巧和配搭

# 4、Vue.js 3.0 PPT（附部分中文翻译）

Evan You 刚刚发布了最新的 Vue 3 和他在 Vue Toronto 的演讲内容：

# 5、vue3.0 初体验有哪些实用新功能

关于项目创建，除了命令创建 3.x 还增加了图形化界面创建以及管理 vue 项目 在创建新项目时还可以混合选用多种集成

# 6、Vue 3.0 的生命周期

ue 3.0 的生命周期多了哪些东西和其中又改变了什么

# 7、Vue-cli 3.0 初体验

如今上 Vue 官网一看，脚手架都早已出 3.0 版了。唉，果然干这行一天不学习都感觉要落伍……

# 8、重磅！Vue CLI 3.0 正式发布，带来多项重大更新

近日，Vue 的作者尤雨溪在 Medium 上宣布正式发布 Vue CLI 3.0，它也将为很多开发者带来期待已久的新特性。

# 9、译文：Vue.js 3.0 开发计划

在上周的 Vue.js 伦敦会议上我简短地透露了下个版本的 Vue 的新特性。这篇文章讲深入地阐述

# 10、Vue 下个版本的计划。Vue CLI 2&3 下的项目优化实践：CDN + Gzip + Prerender

这些优化方案适用于 Vue CLI 2 和 Vue CLI 3 , 文章主要基于 Vue CLI 2 进行介绍，关于如何在 Vue CLI 3 中进行相关的 webpack 调整，我已经放在了 vue-cli3-optimization 这个仓库下，并配有详细的注释，且额外添加方便 Sass 使用的 loader，使用 Sass 时无需再在每个需要引入变量和 mixin 的地方，每次都很麻烦的 @import。下面将详细介绍这些优化方案的实践方式和效果。

# 11、Vue CLI 3 发布：精简配置，增加图形界面，还有这些新功能

不同的项目往往有不同的需求，所以 webpack 这种高可配的打包工具才会火起来，但同时也被骂太复杂了。所以很多人就想简化或者封装配置，例如 facebook/create-react-app 将所有的配置脚本封装为 NPM 软件包。

# 12、专访 Vue 作者尤雨溪：Vue CLI 3.0 重构的原因

上个月，Vue CLI 3.0 正式发布，为很多开发者带来期待已久的新特性，尤雨溪也说 Vue CLI 3.0 经历了重构，旨在尽可能减少现代前端工具在配置上的烦恼，并尽可能在工具链中加入最佳实践，让其成为 Vue 应用程序的默认实践。为了获取更多细节，InfoQ 采访了尤雨溪，以下是对采访内容的整理。

# 13、重磅！尤雨溪发布 Vue 3.0 开发路线

在上周的 Vue.js 伦敦大会上，尤雨溪简要介绍了 Vue 下一个主要版本要发布的内容，9 月 30 日，尤雨溪在 medium 个人博客上发布了 Vue 3.0 的开发路线，全文如下

# 卖艺不卖身

博学之，审问之，慎思之，明辨之，笃行之。

作者：蓝少 (@bluezhan) 版权声明：自由转载 - 非商用 - 非衍生 - 保持署名（创意共享 3.0 许可证）

# License

Released under the MIT License.

# About

🎯Find the latest breaking √vue3 & vue-cli 3+ News.

vue3.github.io/vue3-news/

# Topics

vue3 vue-router vue-components weekly news vue vue-cli typescript vue-composition-api vue-mastery vite vue3-cheatsheet

# Resources

Readme

# License

MIT License

# Releases

No releases published

# Packages

No packages published

# Languages

• Vue93.4%

• TypeScript4.8%

• Other1.8%

• © 2020 GitHub, Inc.

• Terms

• Privacy

• Security

• Status

• Help

• Contact GitHub

• Pricing

• API

• Training

• Blog

• About

Octotree

IMPORTANT: OCTOTREE 6.0

Login with GitHub

# macOS 图床客户端 uPic

uPic 介绍

uPic 采用 Swift 原生开发，通过调用各个服务商的 API 接口实现。体积小、速度快。支持多种图床：smms, 又拍云 USS, 七牛云 KODO, 阿里云 OSS, 腾讯云 COS, 百度云 BOS, 微博，Github, 码云 Gitee, Amazon S3, Imgur, 自定义上传服务。

支持多种常用的输出格式，并且提供上传前图片压缩功能 (支持 JPG、PNG)。等等一些小功能…

用法介绍：https://blog.svend.cc/upic/

下载方式：从 Github release 下载。
如果访问 Github 下载困难的，可以从 Gitee release 下载。

# parallels desktop 虚拟机破解版

百度网盘：链接: https://pan.baidu.com/s/1fq_q5VZCto92mhzT8qUtrQ 密码: dkia

Parallels Desktop 是一款运行在 Mac 电脑上的极为优秀的虚拟机软件，用户可以在 Mac OS X 下非常方便运行 Windows、Linux 等操作系统及应用，用户不必繁琐重复地重启电脑即可在 Win 与 Mac 之间切换甚至同时使用它们。

# 系统要求

# 硬件

• 配置 Intel Core 2 Duo / Core i3 / Core i5 / Core i7 / Core i9 / Intel Core M / Xeon 处理器的 Mac 电脑
• 最低 4GB 内存（16GB 更佳）
• 引导卷（Macintosh HD）需要配置 500MB 的磁盘空间以用于安装 Parallels Desktop 应用程序
• 虚拟机的额外磁盘空间（由安装的操作系统以及应用程序决定，例如，Windows 10 至少需要 16GB）
• 推荐采用 SSD 驱动器以提升系统性能
• 需要联网以用于产品激活和部分功能的使用 [1]

# 软件

• macOS Catalina 10.15
• macOS Mojave 10.14
• macOS High Sierra 10.13
• macOS Sierra 10.12
• DirectX 11 最低满足 macOS Mojave 10.14，若满足 macOS 10.15 Catalina 则更佳 [1]

# SwitchHosts

SwitchHosts 是一个管理、快速切换 Hosts 小工具，开源软件，一键切换 Hosts 配置，非常实用，高效。
开发 Web 过程成，部署有多套环境，网址域名都相同，部署在不同的服务器上，有开发环境、测试环境、预发布环境、生产环境。经常要切换 Hosts 来访问，测试以及验证 bug，如果纯手工修改这会花掉不少时间，而且这个过程毫无乐趣可言。

# Mindmaster

破解版：链接: https://pan.baidu.com/s/1JRZrSSWJEUg0Smn2FpLKcA 密码: t239

MindMaster 思维导图 [1] 是深圳市亿图软件有限公司推出的一款跨平台思维导图软件。 [2] 软件提供了丰富的智能布局、多样性的展示模式、结合精美的设计元素和预置的主题样式，努力帮用户打造一款真正的效率工具。 [2]

# Windows10 IOS

百度网盘下载：链接: https://pan.baidu.com/s/1pGba4uRJAAW0Bnn6foi_8A 密码: r79s

配合 parallels desktop 虚拟机使用

# 面试专题总结：手撕代码

希望读者依此构建自己的知识树（思维导图）

偷懒一下：可参考我自己总结思维导图 : 点这里

手撕代码地址：地址

附带：高频面试题积累文档。 来自于（学长、牛客网等平台）

自己开发的博客地址：zxinc520.com

github 地址: 点击

此篇 js - 【手撕代码】 知识点： 全部弄懂了，面试很容易。

# 1、Promise（A + 规范）、then、all 方法

/*
     Promise：构造 Promise 函数对象
     excutor: 执行构造器 （同步执行）
*/
function Promise(excutor) {
  const _that = this;
  _that.status = "pending"; // 给 promise对象指定 status属性,初始值为 pending
  _that.data = undefined; //给 promise 对象指定一个用于储存结果数据的属性
  _that.callbacks = []; // 每个元素的结构：{ onFulfilled(){}, onRejected(){}}

  function resolve(value) {
    // 如果当前状态不是 pending，直接结束
    if (_that.status !== "pending") return;

    // 将 状态改为 resolved
    _that.status = "resolved";

    // 保存 value 数据
    _that.data = value;

    // 如果有待执行callback 函数，立刻异步执行回调函数
    if (_that.callbacks.length > 0) {
      setTimeout(() => {
        _that.callbacks.forEach((callbacksObj) => {
          callbacksObj.onFulfilled(value);
        });
      });
    }
  }

  function reject(reason) {
    // 如果当前状态不是 pending，直接结束
    if (_that.status !== "pending") return;

    // 将 状态改为 rejected
    _that.status = "rejected";

    // 保存 value 数据
    _that.data = reason;

    // 如果有待执行callback 函数，立刻异步执行回调函数
    if (_that.callbacks.length > 0) {
      setTimeout(() => {
        _that.callbacks.forEach((callbacksObj) => {
          callbacksObj.onRejected(reason);
        });
      });
    }
  }

  //立刻同步执行 excutor
  try {
    excutor(resolve, reject);
  } catch (error) {
    //如果执行器抛出异常，promise对象变为 rejected 状态
    reject(error);
  }
}

/*
          Promise原型对象的 then() --- *思路*

            1、指定成功和失败的回调函数
            2、返回一个新的 promise 对象
            3、返回promise的结果由 onFulfilled/onRejected执行结果决定
            4、指定 onFulfilled/onRejected的默认值
         */
Promise.prototype.then = function (onFulfilled, onRejected) {
  onFulfilled =
    typeof onFulfilled === "function" ? onFulfilled : (reason) => reason; //向后传递成功的value

  //指定默认的失败的回调（实现错误/异常穿透的关键点）
  onRejected =
    typeof onRejected === "function"
      ? onRejected
      : (reason) => {
          //向后传递失败的reason
          throw reason;
        };

  const _that = this;

  //返回一个新的promise 对象
  return new Promise((resolve, reject) => {
    /*
                    调用指定的回调函数处理，根据执行结果，改变return的promise的状态
                 */
    function handle(callback) {
      /*
                           1. 如果抛出异常，return 的promise就会失败，reason 就是 error
                           2. 如果回调函数返回的不是promise，return的promise就会成功，value就是返回的值
                           3.如果回调函数返回的是promise，return的promise的结果就是这个promise的结果
                        */

      try {
        const result = callback(_that.data);

        // 3.如果回调函数返回的是promise，return的promise的结果就是这个promise的结果
        if (result instanceof Promise) {
          // result.then(
          //     value => resolve(value), //当result成功时，让return的promise也成功
          //     reason => reject(reason)  //当result失败时，让return的promise也失败
          // )

          result.then(resolve, reject);
        } else {
          //  2. 如果回调函数返回的不是promise，return的promise就会成功，value就是返回的值
          resolve(result);
        }
      } catch (error) {
        //1. 如果抛出异常，return 的promise就会失败，reason 就是 error

        reject(error);
      }
    }

    if (_that.status === "pending") {
      //假设当前状态还是 pending 状态，将回调函数 保存起来
      _that.callbacks.push({
        onFulfilled(value) {
          handle(onFulfilled); //改promise的状态为 onFulfilled状态
        },
        onRejected(reason) {
          handle(onRejected); //改promise的状态为 onRejected状态
        },
      });
    } else if (_that.status === "resolved") {
      //如果当前是resolved状态，异步执行onresolved并改变return的promise状态
      setTimeout(() => {
        handle(onFulfilled);
      });
    } else {
      //onRejected
      setTimeout(() => {
        //如果当前是rejected状态，异步执行onRejected并改变return的promise状态
        handle(onRejected);
      });
    }
  });
};

/*
            Promise原型对象的 catch()
            指定失败的回调函数
            返回一个新的 promise 对象
         */
Promise.prototype.catch = function (onRejected) {
  return this.then(undefined, onRejected);
};

Promise.prototype.finally = function (callback) {
  return this.then(
    (value) => {
      Promise.resolve(callback(value));
    },
    (reason) => {
      Promise.resolve(callback(reason));
    }
  );
};

/*
            Promise函数对象的 resolve()
            返回 指定结果的 "成功" 的 promise 对象
         */
Promise.resolve = function (value) {
  //返回 一个 成功/失败 的promise
  return new Promise((resolve, reject) => {
    if (value instanceof Promise) {
      //使用value的结果作为 promise 的结果
      value.then(resolve, reject);
    } else {
      //value不是promise => promise变为成功，数据是 value
      resolve(value);
    }
  });
};

/*
            Promise函数对象的 reject()
            返回 指定结果的 "失败" 的 promise 对象
         */
Promise.reject = function (reason) {
  //返回 一个失败的 promise
  return new Promise((resolve, reject) => {
    reject(reason);
  });
};

/*
            Promise函数对象的 all()
            返回 一个promise，只有当所有promise都成功时才成功，否则只要有一个失败就 失败
         */
Promise.all = function (promises) {
  const values = Array.apply(null, { length: promises.length }); //用来保存所有成功 value的数组
  let resolvedCount = 0;

  return new Promise((resolve, reject) => {
    //遍历获取每一个 promise的结果
    promises.forEach((p, index) => {
      Promise.resolve(p).then(
        //p成功，将成功的 value 保存 values
        // values.push(value)  => 不能这样
        (value) => {
          resolvedCount++; //成功的次数

          values[index] = value;

          //如果全部成功了，将return的 promise 改为成功
          if (resolvedCount === promises.length) {
            resolve(values);
          }
        },
        (reason) => {
          //只要一个失败了，return 的promise就失败
          reject(reason);
        }
      );
    });
  });
};

/*
            Promise函数对象的 race()
            返回 一个promise，其结果由第一个完成的promise来决定
         */
Promise.race = function (promises) {
  return new Promise((resolve, reject) => {
    //遍历获取每一个 promise的结果
    promises.forEach((p, index) => {
      Promise.resolve(p).then(
        (value) => {
          // 一旦由成功了，将return 变为失败
          resolve(value);
        },

        (reason) => {
          //只要一个失败了，return 的promise就失败
          reject(reason);
        }
      );
    });
  });
};

# 2、手写 call apply bind

// 自定义apply函数
Function.prototype.apply1 = function (obj, arg) {
  //context为null或者是undefined时,设置默认值
  if (!obj) {
    obj = typeof window === "undefined" ? global : window;
  }
  obj.fn = this;
  let result = null;
  //undefined 或者 是 null 不是 Iterator 对象，不能被 ...
  if (arg === undefined || arg === null) {
    result = obj.fn(arg);
  } else {
    result = obj.fn(...arg);
  }
  delete obj.fn;
  return result;
};

// 自定义 call 函数
Function.prototype.call1 = function (obj, ...arg) {
  if (!obj) {
    obj = typeof window === "undefined" ? global : window;
  }
  obj.fn = this;
  let result = null;
  result = obj.fn(...arg);
  delete obj.fn;
  return result;
};

// 自定义 bind 函数
Function.prototype.bind = function (obj, ...arg) {
  if (!obj) {
    obj = typeof window === "undefined" ? global : window;
  }
  let self = this;
  let args = arg;

  function f() {}

  f.prototype = this.prototype;
  let bound = function () {
    let res = [...args, ...arguments];
    let obj = this instanceof f ? this : obj;
    return self.apply(obj, res);
  };
  bound.prototype = new f();
  return bound;
};

# 3、Promise 封装 Ajax 方法

function ajax(url, methods, data) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.open(methods, url, true);
    xhr.send(data);
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(xhr.status);
      }
    };
  });
}

# 4、异步加载图片

function loadImageAsync(url) {
  return new Promise(function (resolve, reject) {
    const image = new Image();
    image.onload = function () {
      resolve(image);
    };
    image.onerror = function () {
      reject(new Error("Could not load image at " + url));
    };
    image.src = url;
  });
}

# 5、防抖，节流

//防抖
function debounce(fn, delay) {
  let timeout = null;
  return function () {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  };
}

//节流
function throttle(fn, delay) {
  let canRun = true;
  return function () {
    if (!canRun) return;
    canRun = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      canRun = true;
    }, delay);
  };
}

# 6、圣杯、双飞翼

# 圣杯

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .container{
            overflow: hidden;
            padding: 0 100px 0 100px;

        }

        .middle,.left,.right{
            position: relative;
            float: left;
        }

        .left{
            width: 100px;
            height: 100px;
            background: red;
            margin-left: -100%;
            left: -100px;
        }

        .right{
            width: 100px;
            height: 100px;
            background: green;
            margin-left: -100px;
            right: -100px;

        }
        .middle{
            background: blue;
            width: 100%;
            height: 300px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="middle"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

# 双飞翼

<style>
        .container {
            overflow: hidden;
        }
        .middle, .left, .right {
            float: left;
            height: 100px;
        }
        .left {
            width: 100px;
            background: red;
            margin-left: -100%;
        }
        .right {
            width: 100px;
            background: blue;
            margin-left: -100px;
        }
        .middle {
            width: 100%;
            background: aqua;
        }
        .inner {
            margin: 0 100px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="middle">
        <div class="inner">middle</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

# 7、继承相关

# 7.1、原型链继承

• 原型链继承的基本思想：是利用原型让一个引用类型继承另一个引用类型的属性和方法。

  如 SubType.prototype = new SuperType ();

  function SuperType() {
    this.name = "Yvette";
  }
  function SubType() {
    this.age = 22;
  }
  SubType.prototype = new SuperType();

• 缺点

  1. 通过原型来实现继承时，原型会变成另一个类型的实例，原先的实例属性变成了现在的原型属性，该原型的引用类型属性会被所有的实例共享
  2. 在创建子类型的实例时，不能向超类型的构造函数中传递参数

# 7.2、借用构造函数

• 其基本思想为：在子类型的构造函数中调用超类型构造函数。

  function SuperType(name) {
    this.name = name;
  }
  function SubType(name) {
    SuperType.call(this, name);
  }

• 优点

  1. 可以向超类传递参数
  2. 解决了原型中包含引用类型值被所有实例共享的问题

• 缺点

  1. 方法都在构造函数中定义，函数复用无从谈起
  2. 另外超类型原型中定义的方法对于子类型而言都是不可见的

# 7.3、组合继承

• 组合继承指的是将原型链和借用构造函数技术组合到一块，从而发挥二者之长的一种继承模式。基本思路：使用原型链实现对原型属性和方法的继承，通过借用构造函数来实现对实例属性的继承，既通过在原型上定义方法来实现了函数复用，又保证了每个实例都有自己的属性。

  function SuperType() {
    this.name = "zc";
    this.colors = ["pink", "blue", "green"];
  }
  function SubType() {
    SuperType.call(this);
  }
  SubType.prototype = new SuperType();
  SubType.prototype.constructor = SubType;
  let a = new SubType();
  let b = new SubType();
  
  a.colors.push("red");
  console.log(a.colors); //[ 'pink', 'blue', 'green', 'red' ]
  console.log(b.colors); //[ 'pink', 'blue', 'green' ]

• 优点

  1. 可以向超类传递参数
  2. 每个实例都有自己的属性
  3. 实现了函数复用

• 缺点

  1. 无论什么情况下，都会调用两次超类型构造函数：一次是在创建子类型原型的时候，另一次是在子类型构造函数内部。

# 7.4、原型式继承

• 原型式继承继承的基本思想：在 object () 函数内部，先创建一个临时性的构造函数，然后将传入的对象作为这个构造函数的原型，最后返回了这个临时类型的一个新实例，从本质上讲，object () 对传入的对象执行了一次浅拷贝。

  ECMAScript5 通过新增 Object.create () 方法规范了原型式继承。这个方法接收两个参数：一个用作新对象原型的对象和（可选的）一个为新对象定义额外属性的对象 (可以覆盖原型对象上的同名属性)，在传入一个参数的情况下，Object.create () 和 object () 方法的行为相同。

  function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
  }

• 缺点

  1. 同原型链实现继承一样，包含引用类型值的属性会被所有实例共享

# 7.5、寄生式继承

• 寄生式继承是与原型式继承紧密相关的一种思路。寄生式继承的思路与寄生构造函数和工厂模式类似，即创建一个仅用于封装继承过程的函数，该函数在内部已某种方式来增强对象，最后再像真地是它做了所有工作一样返回对象。

  function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
  }
  function createAnother(original) {
    var clone = object(original); //通过调用函数创建一个新对象
    clone.sayHi = function () {
      //以某种方式增强这个对象
      console.log("hi");
    };
    return clone; //返回这个对象
  }

• 优点

  1. 基于 person 返回了一个新对象 -—— person2，新对象不仅具有 person 的所有属性和方法，而且还有自己的 sayHi () 方法。在考虑对象而不是自定义类型和构造函数的情况下，寄生式继承也是一种有用的模式。

• 缺点

  1. 使用寄生式继承来为对象添加函数，会由于不能做到函数复用而效率低下。
  2. 同原型链实现继承一样，包含引用类型值的属性会被所有实例共享。

# 7.6、寄生组合式继承

• 所谓寄生组合式继承，即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法，基本思路：

  不必为了指定子类型的原型而调用超类型的构造函数，我们需要的仅是超类型原型的一个副本，本质上就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型。

  function inheritPrototype(subType, superType) {
    var prototype = object(superType.prototype); //创建对象
    prototype.constructor = subType; //增强对象
    subType.prototype = prototype; //指定对象
  }
  function SuperType(name) {
    this.name = name;
    this.colors = ["pink", "blue", "green"];
  }
  function SuberType(name, age) {
    SuperType.call(this, name);
    this.age = age;
  }
  inheritPrototype(SuberType, SuperType);

• 步骤

  第一步：创建超类型原型的一个副本

  第二步：为创建的副本添加 constructor 属性

  第三步：将新创建的对象赋值给子类型的原型

• 优点

  1. 只调用了一次超类构造函数，效率更高。避免在 SuberType.prototype 上面创建不必要的、多余的属性，与其同时，原型链还能保持不变。因此寄生组合继承是引用类型最理性的继承范式。

# 7.7、ES6 继承

• Class 可以通过 extends 关键字实现继承

  class SuperType {
    constructor(age) {
      this.age = age;
    }
    getAge() {
      console.log(this.age);
    }
  }
  class SubType extends SuperType {
    constructor(age, name) {
      super(age); // 调用父类的constructor(x, y)
      this.name = name;
    }
    getName() {
      console.log(this.name);
    }
  }

• 对于 ES6 的 class 需要做以下几点说明

  1. class 声明会提升，但不会初始化赋值。Foo 进入暂时性死区，类似于 let、const 声明变量。
  2. class 声明内部会启用严格模式。
  3. class 的所有方法（包括静态方法和实例方法）都是不可枚举的。
  4. class 的所有方法（包括静态方法和实例方法）都没有原型对象 prototype，所以也没有 [[construct]]，不能使用 new 来调用。
  5. 必须使用 new 调用 class
  6. class 内部无法重写类名

# 使用 extends 关键字实现继承，有几点需要特别说明

• 子类必须在 constructor 中调用 super 方法，否则新建实例时会报错。如果没有子类没有定义 constructor 方法，那么这个方法会被默认添加。在子类的构造函数中，只有调用 super 之后，才能使用 this 关键字，否则报错。这是因为子类实例的构建，基于父类实例，只有 super 方法才能调用父类实例。
• ES5 的继承，实质是先创造子类的实例对象 this，然后再将父类的方法添加到 this 上面（Parent.apply (this)）。ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到 this 上面（所以必须先调用 super 方法），然后再用子类的构造函数修改 this

# 8、自定义 new 过程

function _new(fn, ...arg) {
  let obj = {};
  obj.__proto__ = fn.prototype;
  let ret = fn.apply(obj, arg);
  return ret instanceof Object ? ret : obj;
}

# 9、手写递归方法实现深拷贝

// 手写实现深拷贝
function checkedType(target) {
  return Object.prototype.toString.call(target).slice(8, -1);
}

function clone(target) {
  let targrtType = checkedType(target);
  let result = null;
  if (targrtType === "Object") {
    result = {};
  } else if (targrtType === "Array") {
    result = [];
  } else {
    return target;
  }
  for (let item in target) {
    let value = target[item];
    if (checkedType(value) === "Object" || checkedType(value) === "Array") {
      result[item] = clone(value);
    } else {
      result[item] = value;
    }
  }
  return result;
}

# 10、实现一个柯里化函数

//ES5写法
const currying = function (fn, ...args) {
  if (args.length < fn.length) {
    return function () {
      return currying(fn, ...args, ...arguments);
    };
  } else {
    return fn(...args);
  }
};

//ES6写法
const currying = (fn, ...args) =>
  args.length < fn.length
    ? (...argments) => currying(fn, ...args, ...argments)
    : fn(...args);

# 11、双向绑定（手写）

// Object.defineProperty 写法
let vm = {};
let obj = {
  name: "zc",
  age: "123",
};

for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    Object.defineProperty(vm, key, {
      get: function () {
        return obj[key];
      },
      set: function (newvalue) {
        obj[key] = newvalue;
      },
    });
  }
}

obj.age = "111";
vm.age = "112221";

console.log(vm.age);
console.log(obj.age);

// Proxy 写法
let vm = new Proxy(obj, {
  get: function (target, propKey, receiver) {
    console.log(`getting ${propKey}!`);
    return Reflect.get(target, propKey, receiver);
  },
  set: function (target, propKey, value, receiver) {
    console.log(`setting ${propKey}!`);
    return Reflect.set(target, propKey, value, receiver);
  },
});

# 10、JS 发布订阅模式

let pubSub = {
  list: {},
  subscribe: function (key, fn) {
    //订阅
    if (!this.list[key]) {
      this.list[key] = [];
    }
    this.list[key].push(fn);
  },
  publish: function (key, ...args) {
    //发布
    for (let fn of this.list[key]) {
      fn.apply(this, args);
    }
  },
  unSubscribe: function (key, fn) {
    //取消订阅
    let fnlist = this.list[key];
    if (!fnlist) return;
    if (!fn) {
      fnlist.length = 0;
    } else {
      fnlist.forEach((item, index) => {
        if (item === index) {
          fnlist.splice(index, 1);
        }
      });
    }
  },
};

pubSub.subscribe("onwork", (time) => {
  console.log(`上班了：${time}`);
});
pubSub.subscribe("offwork", (time) => {
  console.log(`下班了：${time}`);
});
pubSub.subscribe("launch", (time) => {
  console.log(`吃饭了：${time}`);
});

// // 发布
pubSub.publish("offwork", "18:00:00");
pubSub.publish("launch", "12:00:00");

pubSub.unSubscribe("onwork");
pubSub.publish("onwork", "1222:00:00");

# 11、JS 获取 url 参数

let test =
  "?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=21331&rsv_pq=b8627e62001efbb9&rsv_t=eef5sqIQ98s66yOwueYH5BWlFUARj0PkHBdCA4ahbSVYQA5qO9MBoZPC0mU&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=5&rsv_sug1=1&rsv_sug7=100&rsv_sug2=0&inputT=509&rsv_sug4=509";

function f(str) {
  let str1 = str.slice(1);
  let arr = str1.split("&");
  console.log(arr);
  let map = new Map();

  arr.map((item) => {
    const [key, value] = item.split("=");
    map.set(key, decodeURIComponent(value));
  });

  return map;
}

for (let item of f(test)) {
  console.log(item);
}

# 12、二叉树

//1、求二叉树中的节点个数
function getNodenum(root) {
  if (root == null) {
    return;
  }
  return getNodenum(root.left) + getNodenum(root.right) + 1;
}

//2、求二叉树的最大深度
function maxDepth(root) {
  if (root == null) {
    return;
  }
  return Math.max(maxDepth(root.left), maxDepth(root.right)) + 1;
}

//3.二叉树的最小深度
function minDepth(root) {
  if (root == null) return;
  let left = minDepth(root.left);
  let right = minDepth(root.right);
  return left == 0 || right == 0 ? left + right + 1 : Math.min(left, right) + 1;
}

//4.先序遍历（递归）
function preroot(root, callback) {
  if (root != null) {
    callback(root.key);
    preroot(root.left, callback);
    preroot(root.right, callback);
  }
}

//先序遍历（非递归）
function preroot(root) {
  let stack = [],
    result = [];
  if (root != null) {
    stack.push(root);
  }
  while (stack.length != 0) {
    let temp = stack.pop();
    result.push(temp.key);

    if (temp.left != null) {
      stack.push(temp.left);
    }
    if (temp.right != null) {
      stack.push(temp.right);
    }
  }
  return result;
}

//5 中序遍历（递归）
function middleroot(root, callback) {
  if (root != null) {
    preroot(root.left, callback);
    callback(root.key);
    preroot(root.right, callback);
  }
}

//5.1 中序遍历（非递归）
function middleroot(root) {
  let stack = [],
    result = [];
  while (true) {
    while (root != null) {
      stack.push(root);
      root = root.left;
    }
    if (stack.length == 0) {
      break;
    }
    let temp = stack.pop();
    result.push(temp.key);
    stack.push(temp.right);
  }
  return result;
}

//分层遍历（递归）
function bfs(root) {
  let queue = [],
    result = [];
  let pointer = 0;
  if (root != null) {
    queue.push(root);
  }
  let bfsFun = function () {
    let temp = queue[pointer];
    if (temp) {
      result.push(temp.key);
      if (temp.left) {
        queue.push(temp.left);
      }
      if (temp.right) {
        queue.push(temp.right);
      }
      pointer++;
      bfsFun();
    }
  };
  bfsFun();
  return result;
}

//分层遍历（非递归）
function bfs(root) {
  let queue = [],
    result = [];
  if (root !== null) {
    queue.push(root);
  }
  let pointer = 0;
  while (pointer < queue.length) {
    let temp = queue[pointer++];
    result.push(temp.key);
    temp.left && queue.push(temp.left);
    temp.right && queue.push(temp.right);
  }
  return result;
}

// 按之字形顺序打印二叉树
function zhiRoot(root) {
  let stack1 = [],
    stack2 = [],
    result = [];

  if (root != null) {
    stack1.push(root);
  }
  let flag = 1;
  while (stack1.length != 0 || stack2.length != 0) {
    const list = [];
    if (flag % 2) {
      while (stack1.length != 0) {
        let temp = stack2.pop();
        list.push(temp.key);
        temp.left && stack2.push(temp.left);
        temp.right && stack2.push(temp.right);
      }
    } else {
      while (stack2.length != 0) {
        let temp = stack1.pop();
        list.push(temp.key);
        temp.left && stack1.push(temp.left);
        temp.right && stack1.push(temp.right);
      }
    }
    i++;
    result.push(list);
  }
  return result;
}

function Print(root) {
  const result = [];

  if (root === null) {
    return result;
  }

  const stack1 = [];
  const stack2 = [];

  stack1.push(root);
  let flag = 1;
  while (stack1.length !== 0 || stack2.length !== 0) {
    const list = [];
    if (flag % 2) {
      while (stack1.length !== 0) {
        const temp = stack2.pop();
        list.push(temp.val);
        temp.left && stack2.push(temp.left);
        temp.right && stack2.push(temp.right);
      }
    } else {
      while (stack2.length !== 0) {
        const temp = stack1.pop();
        list.push(tmp.val);
        temp.left && stack1.push(temp.left);
        temp.right && stack1.push(temp.right);
      }
    }
    i++;
    result.push(list);
  }
  return result;
}

//7、求二叉树第K层的节点个数
function getknum(root, k) {
  if (root == null || k < 0) {
    return;
  }
  if (root !== null && k == 1) {
    return 1;
  }
  return getknum(root.left, k - 1) + getknum(root.right, k - 1);
}

//8.求二叉树第K层的叶子节点个数
function getksonnum(root, k) {
  if (root == null || k < 0) {
    return;
  }
  if (root != null && k == 1) {
    if (root.left == null && root.right == null) {
      return 1;
    } else {
      return 0;
    }
  }
  return getksonnum(root, k - 1) + getksonnum(root, k - 1);
}

//反转二叉树
function reverseRoot(root) {
  if (root == null) {
    return;
  }
  let temp = root.left;
  root.left = reverseRoot(root.right);
  root.right = reverseRoot(temp);
  return root;
}

// 求二叉树的直径
function longerlength(root) {
  let path = 0;
  getlongerlength(root);
  return path;

  function getlongerlength(root) {
    if (root == null) {
      return;
    }
    let left = longerlength(root.left);
    let right = longerlength(root.right);
    path = Math.max(path, left + right);
    return Math.max(left, right) + 1;
  }
}

// 二叉树中和为某一值的路径
function getPath(root, target) {
  let result = [];
  if (root) {
    findPath(root, target, [], 0, result);
  }
  return result;

  function findPath(root, target, stack, sum, result) {
    stack.push(root.key);
    sum += root.key;
    if (!root.left && !root.right && sum === target) {
      result.push(stack.slice(0));
    }
    if (root.left) {
      findPath(root.left, target, stack, sum, result);
    }
    if (root.right) {
      findPath(root.right, target, stack, sum, result);
    }
    stack.pop();
  }
}

//给定一棵二叉搜索树，请找出其中的第k小的结点。(中序遍历+ k小)

# 13、实现一个链表

function linkedList() {
  function node(data) {
    this.data = data;
    this.next = null;
  }

  this.head = null;
  this.length = 0;

  linkedList.prototype.append = function (data) {
    let newnode = new node(data);
    if (this.head == null) {
      this.head = newnode;
    } else {
      let current = this.head;
      while (current.next) {
        current = current.next;
      }
      current.next = newnode;
      this.length++;
    }
  };
  linkedList.prototype.find = function (data) {
    let current = this.head;
    while (current.next) {
      if (current.data === data) {
        break;
      }
      current = current.next;
    }
    return current;
  };

  linkedList.prototype.fixed = function (data, newdata) {
    let current = this.find(data);
    current.data = newdata;
  };

  linkedList.prototype.prefind = function (data) {
    let current = this.head;
    while (current.next) {
      if (current.next.data === data) {
        break;
      }
      current = current.next;
    }
    return current;
  };

  linkedList.prototype.delete = function (data) {
    if (this.head.data === data) {
      this.head = this.head.next;
      return;
    }
    let prenode = this.prefind(data);
    let current = this.find(data);
    prenode = current.next;
  };

  linkedList.prototype.toString = function () {
    let result = "";
    let current = this.head;
    while (current) {
      result += current.data + "->";
      current = current.next;
    }
    return result;
  };
}
let a = new linkedList();
a.append("abc");
a.append("abcd");
a.append("abcde");
console.log(a.toString());

a.fixed("abc", 11111);
console.log(a.toString());

# 14、哈希表

//链地址法
//装载因子（0.25，0.75）
function HashTable() {
  //属性
  this.storage = []; //存储的位置
  this.count = 0; // 数目
  this.limit = 7; //最终限制数组的大小

  //方法
  // 哈希函数
  HashTable.prototype.hashFunc = function (str, size) {
    //1、定义 hashCode变量
    let hashCode = 0;
    for (let i = 0; i < str.length; i++) {
      //2、霍纳算法，来计算hashCode的值
      hashCode = 37 * hashCode + str.charCodeAt(i);
    }
    //3、取余操作
    let index = hashCode % size;
    return index;
  };

  //插入&修改操作
  HashTable.prototype.put = function (key, value) {
    //1.根据key获取对应的 index
    let index = this.hashFunc(key, this.limit);
    // 2、根据 index 取出对应的 bucket
    let bucket = this.storage[index];

    //3、判断 bucket是否为空
    if (bucket == null) {
      bucket = [];
      this.storage[index] = bucket;
    }
    //4、判断是否是修改数据
    for (let i = 0; i < bucket.length; i++) {
      let tuple = bucket[i];
      if (tuple[0] == key) {
        tuple[1] = value;
        return;
      }
    }
    //5.添加操作
    bucket.push([key, value]);
    this.count++;

    //判断是否需要扩容
    if (this.count > this.limit * 0.75) {
      this.resize(this.limit * 2);
    }
  };

  //获取操作
  HashTable.prototype.get = function (key) {
    let index = this.hashFunc(key, this.limit);
    let bucket = this.storage[index];
    if (bucket == null) {
      return false;
    }
    for (let i = 0; i < bucket.length; i++) {
      let tuple = bucket[i];
      if (tuple[0] === key) {
        return tuple[1];
      }
    }
  };
  HashTable.prototype.remove = function (key) {
    let index = this.hashFunc(key, this.limit);
    let bucket = this.storage[index];
    if (bucket == null) {
      return null;
    }
    for (let i = 0; i < bucket.length; i++) {
      let tuple = bucket[i];
      if (tuple[0] == key) {
        bucket.splice(i, 1);
        this.count--;

        //缩小容量
        if (this.limit > 7 && this.count < this.limit * 0.75) {
          this.resize(Math.floor(this.limit / 2));
        }

        return tuple[1];
      }
    }
    return null;
  };

  //哈希表的扩容、
  HashTable.prototype.resize = function (newLimit) {
    //1.保存旧的数据内容
    let oldStorage = this.storage;
    //2. 重置所有的属性

    this.storage = [];
    this.count = 0;
    this.limit = newLimit;

    //3.遍历 oldStorage 所有的 bucket
    for (let i = 0; i < oldStorage.length; i++) {
      let bucket = oldStorage[i];
      if (bucket == null) {
        continue;
      }
      for (let j = 0; j < bucket.length; j++) {
        let tuple = bucket[i];
        this.put(tuple[0], tuple[1]);
      }
    }
  };
}
let a = new HashTable();
a.put("zc", "15");
a.put("zc1", "115");
a.put("z1", "115");
a.put("asd", "115");
a.put("wew", "115");
a.remove("wew");
console.log(a.get("wew"));

# 15、图

function Queue() {
  //栈中的属性
  this.items = [];

  //1.压入栈push()
  Queue.prototype.enqueue = function (...element) {
    this.items.push(...element);
  };

  //2.从队列中删除前端元素
  Queue.prototype.dequeue = function () {
    return this.items.shift();
  };

  //3.查看一下前端元素
  Queue.prototype.front = function () {
    return this.items[0];
  };

  //4.判断栈是否为空
  Queue.prototype.isEmpty = function () {
    return this.items.length === 0;
  };
  //5.获取栈中元素的个数
  Queue.prototype.size = function () {
    return this.items.length;
  };
  //6.toString方法
  Queue.prototype.toString = function () {
    return this.items.toString().split(",").join(" ");
  };
}

function Graph() {
  //属性： 顶点（数组）/边（字典）
  this.vertexes = []; //顶点
  this.edges = new Map(); //边

  //方法
  //增加对应顶点的方法
  Graph.prototype.addVertex = function (v) {
    this.vertexes.push(v);
    this.edges.set(v, []);
  };

  Graph.prototype.addEdge = function (v1, v2) {
    this.edges.get(v1).push(v2);
    this.edges.get(v2).push(v1);
  };

  //实现toString 方法
  Graph.prototype.toString = function () {
    //定义字符转，保存最终的结构
    let resultString = "";
    for (let i = 0; i < this.vertexes.length; i++) {
      resultString += this.vertexes[i] + "->";
      let vEdges = this.edges.get(this.vertexes[i]);
      for (let j = 0; j < vEdges.length; j++) {
        resultString += vEdges[j] + " ";
      }
      resultString += "\n";
    }
    return resultString;
  };

  //图的遍历

  //初始化状态颜色
  Graph.prototype.initializeColor = function () {
    let colors = [];
    for (let i = 0; i < this.vertexes.length; i++) {
      colors[this.vertexes[i]] = "white";
    }
    return colors;
  };

  //广度优先搜索算法(BFS)  基于队列完成
  Graph.prototype.bfs = function (initV, handler) {
    //1.初始化颜色
    let colors = this.initializeColor();

    //2.创建队列
    let queue = new Queue();

    //3.将顶点加入队列中
    queue.enqueue(initV);

    //4.循环从队列中取出元素
    while (!queue.isEmpty()) {
      // 4.1从队列取出一个顶点
      let v = queue.dequeue();

      //4.2 获取和顶点相连的另外顶点
      let vList = this.edges.get(v);

      //4.3 将v的颜色设置为灰色
      colors[v] = "gray";

      //4.4  遍历所有的顶点，并且加入到队列中
      for (let i = 0; i < vList.length; i++) {
        let e = vList[i];
        if (colors[e] == "white") {
          colors[e] = "gray";
          queue.enqueue(e);
        }
      }

      //4.5 访问顶点
      handler(v);

      //4.6 将顶点设置为黑色
      colors[v] = "black";
    }
  };

  //广度优先搜索算法（DFS）
  Graph.prototype.dfs = function (initV, handler) {
    let colors = this.initializeColor();

    //递归访问
    this.dfsVisit(initV, colors, handler);
  };

  Graph.prototype.dfsVisit = function (v, colors, handler) {
    //1.将颜色设置为灰色
    colors[v] = "gray";
    //2.处理V节点
    handler(v);

    //3.访问v相连的顶点
    let vList = this.edges.get(v);
    for (let i = 0; i < vList.length; i++) {
      let e = vList[i];
      if (colors[e] === "white") {
        this.dfsVisit(e, colors, handler);
      }
    }

    //4.将v设置为黑色
    colors[v] = "black";
  };
}

# 16、几种排序算法的实现

function ArrayList() {
  this.array = [];

  ArrayList.prototype.insert = function (item) {
    this.array.push(item);
  };

  ArrayList.prototype.toString = function () {
    return this.array.join("-");
  };

  ArrayList.prototype.swap = function (m, n) {
    let temp = this.array[m];
    this.array[m] = this.array[n];
    this.array[n] = temp;
  };
  //实现排序算法
  //冒泡排序
  ArrayList.prototype.bubbles = function () {
    if (this.array === null || this.array.length < 2) return this.array;
    let length = this.array.length;
    for (let i = length - 1; i >= 0; i--) {
      for (let j = 0; j < i; j++) {
        if (this.array[j] > this.array[j + 1]) {
          this.swap(j, j + 1);
        }
      }
    }
  };

  //选择排序
  ArrayList.prototype.selectSort = function () {
    if (this.array === null || this.array.length < 2) return this.array;
    let length = this.array.length;
    for (let i = 0; i < length - 1; i++) {
      let min = i;
      for (let j = i + 1; j < length; j++) {
        if (this.array[min] > this.array[j]) {
          min = j;
        }
      }
      this.swap(min, i);
    }
  };

  //插入排序
  ArrayList.prototype.insertSort = function () {
    if (this.array === null || this.array.length < 2) return this.array;
    let length = this.array.length;

    for (let i = 1; i < length; i++) {
      var temp = this.array[i];
      let j = i;
      while (this.array[j - 1] > temp && j > 0) {
        this.array[j] = this.array[j - 1];
        j--;
      }
      this.array[j] = temp;
    }
  };

  //高级排序
  //希尔排序 (对插入排序的升级)
  ArrayList.prototype.shellSort = function () {
    if (this.array === null || this.array.length < 2) return this.array;
    let length = this.array.length;
    //初始化增量
    var gap = Math.floor(length / 2);
    // whlie循环
    while (gap > 1) {
      for (let i = gap; i < length; i++) {
        let temp = this.array[i];
        let j = i;
        while (this.array[j - gap] > temp && j > gap - 1) {
          this.array[j] = this.array[j - gap];
          j -= gap;
        }
        this.array[j] = temp;
      }
      gap = Math.floor(gap / 2);
    }
  };
}

// 快排
function median(arr, left, right) {
  let center = Math.floor(left + (right - left) / 2);
  if (arr[left] > arr[center]) {
    swap(arr, left, right);
  }
  if (arr[center] > arr[right]) {
    swap(arr, center, right);
  }
  if (arr[left] > arr[right]) {
    swap(arr, left, right);
  }
  swap(center, right - 1);
  return arr[right - 1];
}
function swap(arr, m, n) {
  let temp = arr[m];
  arr[m] = arr[n];
  arr[n] = temp;
}
function quickSort(arr) {
  if (arr.length <= 1) {
    return arr;
  }
  return quickSortFun(arr, 0, arr.length - 1);
}
function quickSortFun(arr, left, right) {
  if (left < right) {
    let pivot = median(arr, left, right);
    let i = 0;
    let j = right - 1;
    while (true) {
      while (arr[++i] < pivot) {}
      while (arr[--j] > pivot && j > left) {}
      if (i < j) {
        swap(arr, i, j);
      } else {
        break;
      }
    }
    if (i < right) {
      swap(arr, i, right - 1);
    }
    quickSortFun(arr, left, i - 1);
    quickSortFun(arr, i + 1, right);
  }
  return arr;
}
console.log(quickSort([1, 4, 2, 3, 1]));

# 17、手写迭代器

var it = makeIterator(["a", "b"]);
console.log(it.next());
console.log(it.next());
console.log(it.next());

function makeIterator(array) {
  let nextindex = 0;
  return {
    next: function () {
      if (nextindex < array.length) {
        return { value: array[nextindex++], done: false };
      } else {
        return { value: undefined, done: true };
      }
    },
  };
}

# 18、最大连续子序列

let arr = [1, -5, 8, 3, -4, 15, -8];

// function getNum(arr) {
//     let length = arr.length
//     let maxmun=0
//     for (let i = 0; i <length ; i++) {
//         let sum=arr[i]
//         for (let j = i+1; j < length; j++) {
//             sum+=arr[j]
//             if(sum>maxmun){
//                 maxmun = sum
//             }
//
//         }
//     }
//     return maxmun
// }

function getNum(arr) {
  let max = 0;
  let sum = 0;
  for (let num of arr) {
    if (sum < 0) {
      sum = 0;
    }
    sum += num;
    max = Math.max(max, sum);
  }
  return max;
}

console.log(getNum(arr));

# 19、实现一个 EventListener 类，包含 on，off，emit 方法

//实现一个EventListener类，包含on，off，emit方法
class EventListener {
  constructor() {
    this.list = {};
  }

  on(key, fn) {
    if (!this.list[key]) {
      this.list[key] = [];
    }
    this.list[key].push(fn);
  }

  emit(key, ...args) {
    for (let fn of this.list[key]) {
      fn.apply(this, args);
    }
  }

  off(key, fn) {
    let fnlist = this.list[key];
    if (!fnlist) return;
    if (!fn) {
      fnlist.length = 0;
    } else {
      fnlist.forEach((item, index) => {
        if (item === fn) {
          fnlist.splice(index, 1);
        }
      });
    }
  }
}

let obj1 = new EventListener();

obj1.on("work", (value) => {
  console.log(`我是${value}啊`);
});

obj1.on("eat", (value) => {
  console.log(`我在${value}啊`);
});

obj1.emit("work", "zc");

obj1.off("eat");

obj1.emit("eat", "吃西瓜");

# 20、sleep 函数

用 promise 写一个 delay 函数

function sleep(time) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, time);
  });
}

sleep(1000).then((value) => {
  console.log("11111");
});

# 21、手写斐波那契

// 递归
function getnum(num) {
  if (num <= 1) return 1;
  return getnum(num - 1) + getnum(num - 2);
}
console.log(getnum(2));
// ----------------------------------

//动态规划
function getnum(n) {
  let temp = [];
  if (n == 1 || n == 2) {
    return 1;
  } else {
    temp[1] = 1;
    temp[2] = 2;
    for (let i = 3; i < n; i++) {
      temp[i] = temp[i - 1] + temp[i - 2];
    }
    return temp[i - 1];
  }
}

# 22、只包含’(’, ‘)’, ‘[’, ‘]’, ‘{’, ‘}’ 的字符串，判断是否有效。

var isValid = function (s) {
  var rightSymbols = [];
  for (var i = 0; i < s.length; i++) {
    if (s[i] == "(") {
      rightSymbols.push(")");
    } else if (s[i] == "{") {
      rightSymbols.push("}");
    } else if (s[i] == "[") {
      rightSymbols.push("]");
    } else if (rightSymbols.pop() != s[i]) {
      return false;
    }
  }
  return !rightSymbols.length;
};

# 23、数组中只出现一次的数字

let arr = [1, 2, 3, 4, 3, 2, 1];
const p = arr.reduce((a, b) => {
  return a ^ b;
});
console.log(p);

# 24、数组最大深度

let arr = [1, [1, [3], 2], 2, [1], 3, 4];
let count = 0;

function getDep(arr) {
  let p = false;
  p = arr.some((item) => {
    return item.length > 0;
  });

  if (p) {
    count++;
    getDep(arr.flat());
  } else {
    return count;
  }
}
console.log(getDep(arr));

# 25、递归数组扁平化

let arr = [1, 2, 3, 2, [2, 3], [2, [1], 2]];
function wrap() {
  let ret = [];
  return function flatten(arr) {
    for (let item of arr) {
      if (item.constructor === Array) {
        ret.concat(flatten(item));
      } else {
        ret.push(item);
      }
    }
    return ret;
  };
}
console.log(wrap()(arr));

# 26、模拟 js 精度丢失问题

IEEE 754 标准

function add(num1, num2) {
  const num1Digits = (num1.toString().split(".")[1] || "").length;
  const num2Digits = (num2.toString().split(".")[1] || "").length;
  const baseNum = Math.pow(10, Math.max(num1Digits, num2Digits));
  return (num1 * baseNum + num2 * baseNum) / baseNum;
}
console.log(add(0.1, 0.2));

# 27、单例模式

// 单例模式不透明
function singleTon(name) {
  this.name = name;
  this.instance = null;
}

singleTon.prototype.getName = function () {
  console.log(this.name);
};

singleTon.getInstance = function (name) {
  if (!this.instance) {
    this.instance = new singleTon(name);
  }
  return this.instance;
};

var b = singleTon.getInstance("bbbbb");
var a = singleTon.getInstance("a");

console.log(a);
console.log(b);

// ----------------------------------

// 单例模式不透明（闭包）
function singleTon(name) {
  this.name = name;
}

singleTon.prototype.getName = function () {
  console.log(this.name);
};

singleTon.getInstance = (function () {
  let instance = null;
  return function (name) {
    return instance || (instance = new singleTon(name));
  };
})();

var a = singleTon.getInstance("a");
var b = singleTon.getInstance("bbbbb");
var c = singleTon.getInstance("cccccc");

console.log(a);
console.log(b);
console.log(c);

//	单例模式透明
let getInstance = (function () {
  let instance = null;
  return function (name) {
    if (!instance) {
      this.name = name;
      return (instance = this);
    }
    return instance;
  };
})();

let a = new getInstance("aa");
let b = new getInstance("bbbb");
console.log(a);
console.log(b);

// let getSingle = function (fn) {
//     let result= null
//     return function () {
//        return result || (result = fn.call(this,...arguments))
//     }
// }

// 通用的单例验证方法
const getSingle = function (fn) {
  let result;
  return function () {
    return result || (result = fn.apply(this, arguments));
  };
};

function a(name) {
  this.name = name;
}

var b = getSingle(a);

var d = b("bbb", "xxx", "yyyyy");
var c = b("aaa");

console.log(d);
console.log(c);

# 28、策略模式

// 策略类（开发人员）
var Strategies = {
  backend: function (task) {
    console.log("进行后端任务：", task);
  },
  frontend: function (task) {
    console.log("进行前端任务：", task);
  },
  testend: function (task) {
    console.log("进行测试任务：", task);
  },
};
//  环境类（开发组长）
var Context = function (type, task) {
  typeof Strategies[type] === "function" && Strategies[type](task);
};

# 29、代理模式

//【图片预加载 -- 代理模式】

//定义本体
let myImg = (function () {
  var img = new Image();
  document.body.append(img);
  return {
    setsrc(src) {
      this.src = src;
    },
  };
})();

//代理函数
let Proxysetimg = (function () {
  var img = new Image();
  img.onload = function () {
    myImg.setsrc(this.src);
  };
  return {
    setsrc(src) {
      myImg.setsrc("./loading.gif");
      img.src = src;
    },
  };
})();
Proxysetimg("./111.png");

# 30、观察者模式

// 目标者类
class Subject {
  constructor() {
    this.observers = []; // 观察者列表
  }
  // 添加
  add(observer) {
    this.observers.push(observer);
  }

  // 删除
  remove(observer) {
    let idx = this.observers.findIndex((item) => item === observer);
    idx > -1 && this.observers.splice(idx, 1);
  }

  // 通知
  notify() {
    for (let observer of this.observers) {
      observer.update();
    }
  }
}

// 观察者类
class Observer {
  constructor(name) {
    this.name = name;
  }

  // 目标对象更新时触发的回调
  update() {
    console.log(`目标者通知我更新了，我是：${this.name}`);
  }
}

// 实例化目标者
let subject = new Subject();

// 实例化两个观察者
let obs1 = new Observer("前端开发者");
let obs2 = new Observer("后端开发者");

// 向目标者添加观察者
subject.add(obs1);
subject.add(obs2);

// 目标者通知更新
subject.notify();
// 输出：
// 目标者通知我更新了，我是前端开发者
// 目标者通知我更新了，我是后端开发者

# 31、命令模式

class Receiver {
  // 接收者类
  execute() {
    console.log("接收者执行请求");
  }
}

class Command {
  // 命令对象类
  constructor(receiver) {
    this.receiver = receiver;
  }
  execute() {
    // 调用接收者对应接口执行
    console.log("命令对象->接收者->对应接口执行");
    this.receiver.execute();
  }
}

class Invoker {
  // 发布者类
  constructor(command) {
    this.command = command;
  }
  invoke() {
    // 发布请求，调用命令对象
    console.log("发布者发布请求");
    this.command.execute();
  }
}

const warehouse = new Receiver(); // 仓库
const order = new Command(warehouse); // 订单
const client = new Invoker(order); // 客户
client.invoke();

# 32、Promise 处理文件读取

const fs = require("fs");
const path = require("path");

const readfile = function (filename) {
  return new Promise((resolve, reject) => {
    fs.readFile(path.join(__dirname, filename), "utf-8", function (
      error,
      data
    ) {
      if (error) return reject(error);
      resolve(data);
    });
  });
};

readfile("./01.txt")
  .then((value) => {
    console.log(value);
    return readfile("./02.txt");
  })
  .then((value) => {
    console.log(value);
    return readfile("./03.txt");
  })
  .then((value) => {
    console.log(value);
  })
  .catch((reason) => {
    console.log(reason);
  });

# 33、 Generator 函数文件读取

const fs = require("fs");
const path = require("path");

const readfile = function (filename) {
  return new Promise((resolve, reject) => {
    fs.readFile(path.join(__dirname, filename), "utf8", function (error, data) {
      if (error) return reject(error);
      resolve(data);
    });
  });
};
function* gen() {
  yield readfile("./01.txt");
  yield readfile("./02.txt");
  yield readfile("./03.txt");
}
const result = gen();

result
  .next()
  .value.then((value) => {
    console.log(value);
    return result.next().value;
  })
  .then((value) => {
    console.log(value);
    return result.next().value;
  })
  .then((value) => {
    console.log(value);
  })
  .catch((reason) => {
    console.log(reason);
  });

# 34、async 函数文件读取

const fs = require("fs");
const path = require("path");

const readfile = function (filename) {
  return new Promise((resolve, reject) => {
    fs.readFile(path.join(__dirname, filename), "utf8", function (error, data) {
      if (error) return reject(error);
      resolve(data);
    });
  });
};
async function gen() {
  try {
    const f1 = await readfile("./01.txt");
    const f2 = await readfile("./02.txt");
    const f3 = await readfile("./03.txt");
    console.log(f1);
    console.log(f2);
    console.log(f3);
  } catch (e) {
    console.log(e);
  }
}
gen();