1. MVVM和MVC

Vue是MVVM，React是MVC。

MVVM(Model-View-ViewModel)是在MVC(Model View Controller)的基础上，VM抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。

也就是说MVVM实现的是业务逻辑组件的重用，使开发更高效，结构更清晰，增加代码的复用性。

可以理解为MVVM是MVC的升级版。

虽然React不算一个完整的MVC框架，可以认为是MVC中的V(View)，但是Vue的MVVM还是更面向未来一些。

2. 数据绑定

vue是双向绑定，react是单向绑定。

单向绑定的优点是相应的可以带来单向数据流，这样做的好处是所有状态变化都可以被记录、跟踪，状态变化通过手动调用通知，源头易追溯，没有“暗箱操作”。同时组件数据只有唯一的入口和出口，使得程序更直观更容易理解，有利于项目的可维护性。

但是Vue虽然是双向绑定，但是也是单向数据流，它的双向绑定只是一个语法糖，想看正经的双向绑定可以去看下Dva。

单向绑定的缺点则是代码量会相应的上升，数据的流转过程变长，从而出现很多类似的重复代码。同时由于对应用状态独立管理的严格要求(单一的全局store)，在处理局部状态较多的场景时(如用户输入交互较多的“富表单型”应用)，会显得冗余。

双向绑定可以在表单交互较多的场景下，会简化大量业务无关的代码。

我认为Vue的设计方案好一些，全局性数据流使用单向，局部性数据流使用双向。

3. 数据更新

3.1 React 更新流程

React 推崇 Immutable(不可变)，通过重新render去发现和更新自身。

3.2 Vue 更新流程

Vue通过收集数据依赖去发现更新。

Vue很吸引人的就是它的响应式更新，Vue首次渲染触发data的getter，从而触发依赖收集，为对应的数据创建watcher，当数据发生更改的时候，setter被触发，然后通知各个watcher在下个tick的时候更新数据。

所以说，如果data中某些数据没有在模板template 中使用的话，更新这些数据的时候，是不会触发更新的。这样的设计非常好，没有在模版上用到的变量，当它的值发生变化时，不更新视图，相当于内置了React的shouldComponentUpdate。

3.3 更新比较

• 获取数据更新的手段和更新的粒度不一样

Vue通过依赖收集，当数据更新时 ，Vue明确知道是哪些数据更新了，每个组件都有自己的渲渲染watcher，掌管当前组件的视图更新，所以可以精确地更新对应的组件，所以更新的粒度是组件级别的。

React会递归地把所有的子组件重新render一下，不管是不是更新的数据，此时，都是新的。然后通过 diff 算法 来决定更新哪部分的视图。所以，React 的更新粒度是一个整体。

• 对更新数据是否需要渲染页面的处理不一样

• 只有依赖收集的数据发生更新，Vue 才会去重新渲染页面

• 只要数据有更新(setState，useState 等手段触发更新)，都会去重新渲染页面 （可以使用shouldComponentUpdate/ PureComponent 改善)

Vue的文档里有一描述说，Vue是细粒度数据响应机制，所以说数据更新这一块，我认为Vue的设计方案好一些。

4. 性能对比

借用尤大大的一段话：

模板在性能这块吊打 tsx，在 IDE 支持抹平了的前提下用 tsx 本质上是在为了开发者的偏好牺牲用户体验的性能（性能没遇到瓶颈就无所谓） 这边自己不维护框架的人吐槽吐槽我也能理解，毕竟作为使用者只需要考虑自己爽不爽。作为维护者，Vue 的已有的用户习惯、生态和历史包袱摆在那里，能激进的程度是有限的，Vue 3 的大部分设计都是戴着镣铐跳舞，需要做很多折衷。如果真要激进还不如开个新项目，或者没人用的玩票项目，想怎么设计都可以。 组件泛型的问题也有不少人提出了，这个目前确实不行，但不表示以后不会有。 最后实话实说，所有前端里面像这个问题下面的类型体操运动员们毕竟是少数，绝大部分有 intellisense + 类型校验就满足需求了。真的对类型特别特别较真的用 React 也没什么不好，无非就是性能差点。

为什么模板性能吊打TSX？

tsx和vue template其实都是一样的模版语言，tsx最终也会被编译成createElement，模板被编译成render函数，所以本质上两者都有compile-time和runtime，但tsx的特殊性在于它本身是在ts语义下的，过于灵活导致优化无从下手。但是vue的模板得益于自身本来就是DSL，有自己的文法和语义，所以vue在模板的compile-time做了巨多的优化，比如提升不变的vnode，以及blocktree配合patchflag靶向更新，这些优化在最终的runtime上会把性能拉开不少。

DSL： 一种为特定领域设计的，具有受限表达性的编程语言。

所以说Vue的性能是优于React的。

5. React Hooks和Vue Hooks

其实 React Hook 的限制非常多，比如官方文档中就专门有一个章节介绍它的限制：

1. 不要在循环，条件或嵌套函数中调用 Hook

2. 确保总是在你的 React 函数的最顶层调用他们。

3. 遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。

而 Vue 带来的不同在于：

1. 与 React Hooks 相同级别的逻辑组合功能，但有一些重要的区别。 与 React Hook 不同，setup函数仅被调用一次，这在性能上比较占优。

2. 对调用顺序没什么要求，每次渲染中不会反复调用 Hook 函数，产生的的 GC 压力较小。

3. 不必考虑几乎总是需要 useCallback 的问题，以防止传递函数prop给子组件的引用变化，导致无必要的重新渲染。

4. React Hook 有臭名昭著的闭包陷阱问题，如果用户忘记传递正确的依赖项数组，useEffect 和 useMemo 可能会捕获过时的变量，这不受此问题的影响。 Vue 的自动依赖关系跟踪确保观察者和计算值始终正确无误。

5. 不得不提一句，React Hook 里的「依赖」是需要你去手动声明的，而且官方提供了一个 eslint 插件，这个插件虽然大部分时候挺有用的，但是有时候也特别烦人，需要你手动加一行丑陋的注释去关闭它。

我们认可 React Hooks 的创造力，这也是 Vue-Composition-Api 的主要灵感来源。上面提到的问题确实存在于 React Hook 的设计中，我们注意到 Vue 的响应式模型恰好完美的解决了这些问题。

--- 来自ssh

Vue的组合式API刚出来的时候确实一看好像React Hooks，我也对它的.value进行了吐槽，

但是总体来说还是更偏向于Vue Hooks。

6. 写法

React的思路是all in js，通过js来生成html，所以设计了jsx，还有通过js来操作css，社区的styled-component、jss等，所以说React的写法感觉相对自由一些，逻辑正确老子想怎么写怎么写，对于我来说，我确实更偏向于React的写法。

Vue则是把html，css，js组合到一起，就像 Web 开发多年的传统开发方式一样， vue-loader会解析文件，提取每个语言块用各自的处理方式，vue有单文件组件(SFC)，可以把html、css、js写到一个文件中，html提供了模板引擎来处理。Vue感觉是给你搭了一个框架，告诉你什么地方该写什么东西，你只要按照他的要求向里面填内容就可以了，没有React那么自由，但是上手难度简单了许多。而且因为SFC，一个组件的代码会看起来很长，维护起来很头痛。

7. 理念及设计

Vue 和 React 的核心差异，以及核心差异对后续设计产生的“不可逆”影响。

Vue 和 React 在 API 设计风格和哲学理念（甚至作者个人魅力）上的不同。

Vue 和 React 在工程化预编译构建阶段，AOT 和 JIT 优化的本质差异和设计。

这个层次的比较确实对我难度确实大，我也懒得去copy，下面是Lucas大佬的分析，可以去看一下，时空隧道。

作者：黑色的枫
来源：https://juejin.cn/post/7037365650251055134

前言

微前端是 2016 年thoughtWorks提出的概念，它将微服务的理念应用于浏览器端，即将前端应用由单体应用转变成多个小型前端应用聚合的应用。各个小型前端应用可以独立运行、独立开发、独立部署。

为什么出现？

与微服务出现的原因相似，随着前端业务越来越复杂，前端的代码和业务逻辑也愈发难以维护，尤其对于中后台系统，很容易出现巨石应用，微前端由此应运而生，其根本目的就是解决巨石应用的项目复杂，系统庞大，开发人员众多，难以维护的问题。

微前端 vs 巨石应用

架构方案

基座模式是当前比较常见的微前端架构设计。

首先以容器应用作为整个项目的主应用，负责子应用的注册，聚合，提供子运行环境、管理生命周期等。子应用就是各个独立部署、独立开发的单元。

应用注册表拥有每个应用及对应的入口。在前端领域里，入口的直接表现形式可以是路由，又或者对应的应用映射。

目前可以实现微前端架构的方案有如下：

HTTP后端路由转发（nginx）

• ✅ 简单高效快速，同时不需要前端做额外的工作。

• ❌ 体验并不好，相当于mpa页面，路由到每个应用需要重新刷新

iframe

• ✅ 前端最简单的应用方式，直接嵌入，门槛最低，改动最小

• ❌ iframe都会遇到的一些典型问题：UI 不同步，DOM 结构不共享（比如iframe中的弹框），跨域通信等

各个业务独立打到npm包中

• ✅ 门槛低，易上手

• ❌ 模块修改后需要重新部署发布，太麻烦。

组合式应用路由分发（基座模式）

• ✅ 纯前端改造，体验良好，各个业务相互独立

• ❌ 需要设计和开发，有一定成本，同时需要兼顾子页面和基座的变量污染，样式互相影响等问题

web component

• ✅ 是一项标准，目前它包含三项主要技术，它们可以一起使用来创建封装功能的定制元素，可以在你喜欢的任何地方重用，不必担心代码冲突。应该是微前端的最终态

• ❌ 比较新，兼容性较差

微前端页面形态

微前端基座框架需要解决的问题

路由分发

作为微前端的基座应用，是整个应用的入口，负责承载当前子应用的展示和对其他路由子应用的转发，对于当前子应用的展示，一般是由以下几步构成：

1. 远程拉取子应用内容

2. 将子应用的 js 和 css 抽离，采用eval来运行 js，并将 css 和 html 内容append到基座应用中留给子应用的展示区域

3. 当子应用切换走时，同步卸载这些内容

对于路由分发而言，以采用react-router开发的基座SPA应用来举例，主要是下面这个流程：

1. 当浏览器的路径变化后，react-router会监听hashchange或者popstate事件，从而获取到路由切换的时机。

2. 最先接收到这个变化的是基座的router，通过查询注册信息可以获取到转发到那个子应用，经过一些逻辑处理后，采用修改hash方法或者pushState方法来路由信息推送给子应用的路由，子应用可以是手动监听hashchange或者popstate事件接收，或者采用react-router接管路由，后面的逻辑就由子应用自己控制。

应用隔离

应用隔离问题主要分为主应用和子应用，子应用和子应用之间的JavaScript执行环境隔离，CSS样式隔离，

CSS

• 当主应用和子应用同屏渲染时，就可能会有一些样式会相互污染，如果要彻底隔离CSS污染，可以采用CSS Module 或者命名空间的方式，给每个子应用模块以特定前缀，即可保证不会互相干扰，可以采用webpack的postcss插件，在打包时添加特定的前缀。

• 而对于子应用与子应用之间的CSS隔离就非常简单，在每次应用加载时，将该应用所有的link和style 内容进行标记。在应用卸载后，同步卸载页面上对应的link和style即可。

JavaScript隔离

• 每当子应用的JavaScript被加载并运行时，它的核心实际上是对全局对象Window的修改以及一些全局事件的改变，例如jQuery这个js运行后，会在Window上挂载一个window.$对象，对于其他库React，Vue也不例外。为此，需要在加载和卸载每个子应用的同时，尽可能消除这种冲突和影响，最普遍的做法是采用沙箱机制（SandBox）。

• 沙箱机制的核心是让局部的JavaScript运行时，对外部对象的访问和修改处在可控的范围内，即无论内部怎么运行，都不会影响外部的对象，需要结合 with 关键字和window.Proxy对象来实现浏览器端的沙箱。

消息通信

应用间通信有很多种方式，当然，要让多个分离的子应用之间要做到通信，本质上仍离不开中间媒介或者说全局对象。所以对于消息订阅（pub/sub）模式的通信机制是非常适用的，在基座应用中会定义事件中心Event，每个子应用分别来注册事件，当被触发事件时再有事件中心统一分发，这就构成了基本的通信机制。

当然，如果基座和子应用采用的是React或者是Vue，是可以结合Redux和Vuex来一起使用，实现应用之间的通信。

搭一个看看？

qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。也是支付宝内部广泛使用的微前端框架。

那么我们就使用 qiankun 从头搭一个demo出来体验一下

基座

• 基座我们使用react，自行使用 create-react-app 创建一个react项目即可。

• npm install qiankun -s

• 在基座中需要调用 registerMicroApps 注册子应用，然后调用start启动

因此在 index.js 中插入如下代码

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'vueApp',
    entry: '//localhost:8080',
    container: '#container',
    activeRule: '/app-vue',
  },
]);

// 启动 qiankun
start();

• 修改App.js

• • 加入一些 antd 元素，让demo像样一些

  • 同时，由于qiankun根据路由来加载不同微应用，我们也安装 react-router-dom

• • npm install react-router-dom

  • 安装完之后修改 App.js 如下：

import { useState } from 'react';
import { Layout, Menu } from 'antd';
import { PieChartOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom'
import './App.css';

const { Header, Content, Footer, Sider } = Layout;

const App = () => {
  const [collapsed, setCollapsed] = useState(false);
  
  const onCollapse = collapsed => {
    setCollapsed(collapsed);
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
        <div className="logo" />
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
          <Menu.Item key="1" icon={<PieChartOutlined />}>
            <Link to="/app-vue">Vue应用</Link>
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout className="site-layout">
        <Header className="site-layout-background" style={{ padding: 0 }} />
        <Content style={{ margin: '16px' }}>
          <div id="container" className="site-layout-background" style={{ minHeight: 360 }}></div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>This Project ©2021 Created by DiDi</Footer>
      </Layout>
    </Layout>
  );
}

export default App;

• 记得修改 index.js，把 App 组件用 react-router-dom 的 BrowserRouter 包一层，让 BrowserRouter 作为顶层组件才可以跳转

• 至此，基座搭好了

子页面

尝试使用vue作为子页面，来体现微前端的技术隔离性。

• 使用vue-cli创建vue2.x项目

• 修改main.js如下：

import Vue from "vue/dist/vue.js";
import App from "./App.vue";
import router from "./router";

Vue.config.productionTip = false;

// window.__POWERED_BY_QIANKUN__ 为true 说明在 qiankun 架构中
// 修改webpack的publicPath，将子应用资源加载的公共基础路径设为 qiankun 包装后的路径
// 这个 __INJECTED_PUBLIC_PATH_BY_QIANKUN__ 的实际地址是子应用的服务器地址，子应用的应用资源都在他本身的实际服务器上
if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

let instance = null;
function render(props = {}) {
  const { container } = props;
  instance = new Vue({
    router,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector("#app") : "#app");
}

// 独立运行时 直接渲染
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

// 应用需要导出 bootstrap、mount、unmount 三个生命周期钩子，以供主应用在适当的时机调用。
export async function bootstrap() {
  console.log("[vue] vue app bootstraped");
}

export async function mount(props) {
  console.log("[vue] props from main framework", props);
  render(props);
}

export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = "";
  instance = null;
}

• router.js配置如下：

import Vue from "vue/dist/vue.js";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "/test",
    name: "Test",
    component: () => import("./components/Test.vue"),
  },
  {
    path: "/hello",
    name: "Hello",
    component: () => import("./components/Hello.vue"),
  },
];

const router = new VueRouter({
  base: window.__POWERED_BY_QIANKUN__ ? "/app-vue/" : "/",
  mode: "history",
  routes,
});

export default router;

• 根目录下新建vue.config.js 用来配置webpack，内容如下：

const { name } = require("./package");
module.exports = {
  devServer: {
    // 跨域
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      // 把微应用打包成 umd 库格式
      libraryTarget: "umd",
      jsonpFunction: `webpackJsonp_${name}`,
    },
  },
};

启动

基座和子应用分别启动，可以看到，子应用已经加载到了主应用中：

作者：visa
来源：https://juejin.cn/post/7037386845751083021

当我们用 Typesript 来写 Node.js 的代码，写完代码之后要用 tsc 作编译，之后再用 Node.js 来跑，这样比较麻烦，所以我们会用 ts-node 来直接跑 ts 代码，省去了编译阶段。

有没有觉得很神奇，ts-node 怎么做到的直接跑 ts 代码的？

其实原理并不难，今天我们来实现一个 ts-node 吧。

相关基础

实现 ts-node 需要 3 方面的基础知识：

• require hook
• repl 模块、vm 模块
• ts compiler api

我们先学下这些基础

require hook

Node.js 当 require 一个 js 模块的时候，内部会分别调用 Module.load、 Module._extensions[‘.js’]，Module._compile 这三个方法，然后才是执行。

同理，ts 模块、json 模块等也是一样的流程，那么我们只需要修改 Module._extensions[扩展名] 的方法，就能达到 hook 的目的：

require.extensions['.ts'] = function(module, filename) {

    // 修改代码

    module._compile(修改后的代码, filename);

}

比如上面我们注册了 ts 的处理函数，这样当处理 ts 模块时就会调用这个方法，所以我们在这里面做编译就可以了，这就是 ts-node 能够直接执行 ts 的原理。

repl 模块

Node.js 提供了 repl 模块可以创建 Read、Evaluate、Print、Loop 的命令行交互环境，就是那种一问一答的方式。ts-node 也支持 repl 的模式，可以直接写 ts 代码然后执行，原理就是基于 repl 模块做的扩展。

repl 的 api 是这样的： 通过 start 方法来创建一个 repl 的交互，可以指定提示符 prompt，可以自己实现 eval 的处理逻辑：

const repl = require('repl');



const r = repl.start({ 

    prompt: '- . - > ', 

    eval: myEval 

});



function myEval(cmd, context, filename, callback) {

    // 对输入的命令做处理

    callback(null, 处理后的内容);

}

repl 的执行时有一个上下文的，在这里就是 r.context，我们在这个上下文里执行代码要使用 vm 模块：

const vm = require('vm');



const res = vm.runInContext(要执行的代码, r.context);

这两个模块结合，就可以实现一问一答的命令行交互，而且 ts 的编译也可以放在 eval 的时候做，这样就实现了直接执行 ts 代码。

ts compiler api

ts 的编译我们主要是使用 tsc 的命令行工具，但其实它同样也提供了编译的 api，叫做 ts compiler api。我们做工具的时候就需要直接调用 compiler api 来做编译。

转换 ts 代码为 js 代码的 api 是这个：

const { outputText } = ts.transpileModule(ts代码, {

    compilerOptions: {

        strict: false,

        sourceMap: false,

        // 其他编译选项

    }

});

当然，ts 也提供了类型检查的 api，因为参数比较多，我们后面一篇文章再做展开，这里只了解 transpileModule 的 api 就够了。

了解了 require hook、repl 和 vm、ts compiler api 这三方面的知识之后，ts-node 的实现原理就呼之欲出了，接下来我们就来实现一下。

实现 ts-node

直接执行的模式

我们可以使用 ts-node + 某个 ts 文件，来直接执行这个 ts 文件，它的原理就是修改了 require hook，也就是 Module._extensions['.ts'] 来实现的。

在 require hook 里面做 ts 的编译，然后后面直接执行编译后的 js，这样就能达到直接执行 ts 文件的效果。

所以我们重写 Module._extensions['.ts'] 方法，在里面读取文件内容，然后调用 ts.transpileModule 来把 ts 转成 js，之后调用 Module._compile 来处理编译后的 js。

这样，我们就可以直接执行 ts 模块了，具体的模块路径是通过命令行参数执行的，可以用 process.argv 来取。

const path = require('path');

const ts = require('typescript');

const fs = require('fs');



const filePath = process.argv[2];



require.extensions['.ts'] = function(module, filename) {

    const fileFullPath = path.resolve(__dirname, filename);

    const content = fs.readFileSync(fileFullPath, 'utf-8');



    const { outputText } = ts.transpileModule(content, {

        compilerOptions: require('./tsconfig.json')

    });



    module._compile(outputText, filename);

}



require(filePath);

我们准备一个这样的 ts 文件 test.ts：

const a = 1;

const b = 2;



function add(a: number, b: number): number {

    return a + b;

}



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

然后用这个工具 hook.js 来跑：

可以看到，成功的执行了 ts，这就是 ts-node 的原理。

当然，细节的逻辑还有很多，但是最主要的原理就是 require hook + ts compiler api。

repl 模式

ts-node 支持启动一个 repl 的环境，交互式的输入 ts 代码然后执行，它的原理就是基于 Node.js 提供的 repl 模块做的扩展，在自定义的 eval 函数里面做了 ts 的编译，然后使用 vm.runInContext 的 api 在 repl 的上下文中执行 js 代码。

我们也启动一个 repl 的环境，设置提示符和自定义的 eval 实现。

const repl = require('repl');



const r = repl.start({ 

    prompt: '- . - > ', 

    eval: myEval 

});



function myEval(cmd, context, filename, callback) {



}

eval 的实现就是编译 ts 代码为 js，然后用 vm.runInContext 来执行编译后的 js 代码，执行的 context 指定为 repl 的 context：

function myEval(cmd, context, filename, callback) {

    const { outputText } = ts.transpileModule(cmd, {

        compilerOptions: {

            strict: false,

            sourceMap: false

        }

    });

    const res = vm.runInContext(outputText, r.context);

    callback(null, res);

}

同时，我们还可以对 repl 的 context 做一些扩展，比如注入一个 who 的环境变量：

Object.defineProperty(r.context, 'who', {

  configurable: false,

  enumerable: true,

  value: '神说要有光'

});

我们来测试下效果：

可以看到，执行后启动了一个 repl 环境，提示符修改成了 -.- >，可以直接执行 ts 代码，还可以访问全局变量 who。

这就是 ts-node 的 repl 模式的大概原理： repl + vm + ts compiler api。

全部代码如下：

const repl = require('repl');

const ts = require('typescript');

const vm = require('vm');



const r = repl.start({ 

    prompt: '- . - > ', 

    eval: myEval 

});



Object.defineProperty(r.context, 'who', {

  configurable: false,

  enumerable: true,

  value: '神说要有光'

});



function myEval(cmd, context, filename, callback) {

    const { outputText } = ts.transpileModule(cmd, {

        compilerOptions: {

            strict: false,

            sourceMap: false

        }

    });

    const res = vm.runInContext(outputText, r.context);

    callback(null, res);

}

总结

ts-node 可以直接执行 ts 代码，不需要手动编译，为了深入理解它，我们我们实现了一个简易 ts-node，支持了直接执行和 repl 模式。

直接执行的原理是通过 require hook，也就是 Module._extensions[ext] 里通过 ts compiler api 对代码做转换，之后再执行，这样的效果就是可以直接执行 ts 代码。

repl 的原理是基于 Node.js 的 repl 模块做的扩展，可以定制提示符、上下文、eval 逻辑等，我们在 eval 里用 ts compiler api 做了编译，然后通过 vm.runInContext 在 repl 的 context 中执行编译后的 js。这样的效果就是可以在 repl 里直接执行 ts 代码。

当然，完整的 ts-node 还有很多细节，但是大概的原理我们已经懂了，而且还学到了 require hook、repl 和 vm 模块、 ts compiler api 等知识。

题外话

其实 ts-node 的原理是应一个同学的要求写的，大家有想读的 nodejs 工具的源码也可以告诉我呀(可以加我微信)，无偿提供源码带读 + 简易实现的服务，不过会做一些筛选。

作者：zxg_神说要有光
来源：https://juejin.cn/post/7036688014206042143

前言

本文的编写主要是最近在使用 midway 编写后端应用，midway 的 IOC 控制反转能力跟我们平时常写的前端应用，例如 react、vue 这些单应用还是有蛮大区别的，所以促使我想一探究竟，这种类 Spring IOC 容器是如何用 JavaScript 来实现的。为方便读者阅读，本文的组织结构依次为 TS 装饰器、Reflect Metadata、IOC 容器源码简单解读、以及自定义实现 IOC 容器。阅读完本文后，我希望你能有这样的感悟：元数据（metadata）和 装饰器(Decorator) 本是 ES 中两个独立的部分，但是结合它们， 竟然能实现 控制反转 这样的能力。本文的所有演示实例都已经上传到 github 仓库 ioc-container ，读者可以克隆下来进行调试运行。

辛苦整理良久，还望手动点赞鼓励~ 博客 github地址为：github.com/fengshi123/… ，汇总了作者的所有博客，欢迎关注及 star ~

一、TS 装饰器

1、类装饰器

（1）类型声明

type ClassDecorator = <TFunction extends Function>
  (target: TFunction) => TFunction | void;

• 参数:

  target: 类的构造器。

• 返回:

如果类装饰器返回了一个值，它将会被用来代替原有的类构造器的声明。因此，类装饰器适合用于继承一个现有类并添加一些属性和方法。例如我们可以添加一个 toString 方法给所有的类来覆盖它原有的 toString 方法，以及增加一个新的属性 school，如下所示

type Consturctor = { new (...args: any[]): any };

function School<T extends Consturctor>(BaseClass: T) {
  // 新构造器继承原有的构造器，并且返回
  return class extends BaseClass {  
    // 新增属性 school
    public school = 'qinghua'
    // 重写方法 toString
    toString() {
      return JSON.stringify(this);
    }
  };
}

@School
class Student {
  public name = 'tom';
  public age = 14;
}

console.log(new Student().toString())
// {"name":"tom","age":14,"school":"qinghua"}

但是存在一个问题：装饰器并没有类型保护，这意味着在类装饰器的构造函数中新增的属性，通过原有的类实例将报无法找到的错误，如下所示

type Consturctor = { new (...args: any[]): any };

function School<T extends Consturctor>(BaseClass: T){
  return class extends BaseClass {
    // 新增属性 school
    public school = 'qinghua'
  };
}


@School
class Student{
  getSchool() {
    return this.school; // Property 'school' does not exist on type 'Student'
  }
}

new Student().school  // Property 'school' does not exist on type 'Student'

这是 一个TypeScript的已知的缺陷。 目前我们能做的可以额外提供一个类用于提供类型信息，如下所示

type Consturctor = { new (...args: any[]): any };

function School<T extends Consturctor>(BaseClass: T){
  return class extends BaseClass {
    // 新增属性 school
    public school = 'qinghua'
  };
}

// 新增一个类用于提供类型信息
class Base {
  school: string;
}

@School
class Student extends Base{
  getSchool() {
    return this.school; 
  }
}

new Student().school)

2、属性装饰器

（1）类型声明

type PropertyDecorator = (
    target: Object, 
  propertyKey: string | symbol
) => void;
复制代码

• 参数:

  1. target: 对于静态成员来说是类的构造器，对于实例成员来说是类的原型链。

  2. propertyKey: 属性的名称。

• 返回:

返回的结果将被忽略。

我们可以通过属性装饰器给属性添加对应的验证判断，如下所示

function NameObserve(target: Object, property: string): void {
  console.log('target:', target)
  console.log('property:', property)
  let _property = Symbol(property)
  Object.defineProperty(target, property, {
    set(val){
      if(val.length > 4){
        throw new Error('名称不能超过4位!')
      }
      this[_property] = val;
    },
    get: function() {
      return this[_property];
  }
  })
}

class Student {
  @NameObserve
  public name: string;  // target: Student {}   key: 'name'
}

const stu = new Student();
stu.name = 'jack'
console.log(stu.name); // jack
// stu.name = 'jack1';  // Error: 名称不能超过4位!

export default Student;

3、方法装饰器

（1）类型声明：

type MethodDecorator = <T>(
  target: Object,
  propertyKey: string | symbol,
  descriptor: TypedPropertyDescriptor<T>
) => TypedPropertyDescriptor<T> | void;

• 参数：

  1. target: 对于静态成员来说是类的构造器，对于实例成员来说是类的原型链;

  2. propertyKey: 属性的名称;

  3. descriptor: 属性的描述器;

• 返回： 如果返回了值，它会被用于替代属性的描述器。

方法装饰器不同于属性装饰器的地方在于 descriptor 参数。 通过这个参数我们可以修改方法原本的实现，添加一些共用逻辑。 例如我们可以给一些方法添加打印输入与输出的能力

function logger(target: Object, property: string, 
    descriptor: PropertyDescriptor): PropertyDescriptor | void {
  const origin = descriptor.value;
  console.log(descriptor)
  descriptor.value = function(...args: number[]){
    console.log('params:', ...args)
    const result = origin.call(this, ...args);
    console.log('result:', result);
    return result;
  }
}

class Person {
  @logger
  add(x: number, y: number){
    return x + y;
  }
}

const person = new Person();
const result = person.add(1, 2);
console.log('查看 result:', result) // 3

4、访问器装饰器

访问器装饰器总体上讲和方法装饰器很接近，唯一的区别在于描述器中有的 key 不同： 方法装饰器的描述器的 key 为：

• value

• writable

• enumerable

• configurable

访问器装饰器的描述器的key为：

• get

• set

• enumerable

• configurable

例如，我们可以对访问器进行统一更改：

function descDecorator(target: Object, property: string, 
    descriptor: PropertyDescriptor): PropertyDescriptor | void {
  const originalSet = descriptor.set;
  const originalGet = descriptor.get;
  descriptor.set = function(value: any){
    return originalSet.call(this, value)
  }
  descriptor.get = function(): string{
    return 'name:' + originalGet.call(this)
  }
}

class Person {
  private _name = 'tom';

  @descDecorator
  set name(value: string){
    this._name = value;
  }

  get name(){
    return this._name;
  }
}

const person = new Person();
person.name = ('tom');
console.log('查看:', person.name) // name:'tom'

5、参数装饰器

类型声明：

type ParameterDecorator = (
  target: Object,
  propertyKey: string | symbol,
  parameterIndex: number
) => void;

• 参数：

  1. target: 对于静态成员来说是类的构造器，对于实例成员来说是类的原型链。

  2. propertyKey: 属性的名称(注意是方法的名称，而不是参数的名称)。

  3. parameterIndex: 参数在方法中所处的位置的下标。

• 返回：

返回的值将会被忽略。

单独的参数装饰器能做的事情很有限，它一般都被用于记录可被其它装饰器使用的信息。

function ParamDecorator(target: Object, property: string, 
    paramIndex: number): void {
  console.log(property);
  console.log(paramIndex);
}

class Person {
  private name: string;

  public setNmae(@ParamDecorator school: string, name: string){  // setNmae 0
    this.name = school + '_' + name
  }
}

6、执行时机

装饰器只在解释执行时应用一次，如下所示，这里的代码会在终端中打印 apply decorator，即便我们其实并没有使用类 A。

function f(C) {
  console.log('apply decorator')
  return C
}

@f
class A {}

// output: apply decorator

7、执行顺序

不同类型的装饰器的执行顺序是明确定义的：

• 实例成员：参数装饰器 -> 方法/访问器/属性 装饰器

• 静态成员：参数装饰器 -> 方法/访问器/属性 装饰器

• 构造器：参数装饰器

• 类装饰器

示例如下所示

function f(key: string): any {
  console.log("evaluate: ", key);
  return function () {
    console.log("call: ", key);
  };
}

@f("Class Decorator")
class C {
  @f("Static Property")
  static prop?: number;

  @f("Static Method")
  static method(@f("Static Method Parameter") foo:any) {}

  constructor(@f("Constructor Parameter") foo:any) {}

  @f("Instance Method")
  method(@f("Instance Method Parameter") foo:any) {}

  @f("Instance Property")
  prop?: number;
}

/* 输出顺序如下
evaluate:  Instance Method
evaluate:  Instance Method Parameter
call:  Instance Method Parameter
call:  Instance Method
evaluate:  Instance Property
call:  Instance Property
evaluate:  Static Property
call:  Static Property
evaluate:  Static Method
evaluate:  Static Method Parameter
call:  Static Method Parameter
call:  Static Method
evaluate:  Class Decorator
evaluate:  Constructor Parameter
call:  Constructor Parameter
call:  Class Decorator
*/

我们从上注意到执行实例属性 prop 晚于实例方法 method 然而执行静态属性 static prop 早于静态方法static method。 这是因为对于属性/方法/访问器装饰器而言，执行顺序取决于声明它们的顺序。 然而，同一方法中不同参数的装饰器的执行顺序是相反的， 最后一个参数的装饰器会最先被执行。

function f(key: string): any {
  console.log("evaluate: ", key);
  return function () {
    console.log("call: ", key);
  };
}

class C {
  method(
    @f("Parameter Foo") foo,
    @f("Parameter Bar") bar
  ) {}
}

/*  输出顺序如下
evaluate:  Parameter Foo
evaluate:  Parameter Bar
call:  Parameter Bar
call:  Parameter Foo
*/

8、多个装饰器组合

我们可以对同一目标应用多个装饰器。它们的组合顺序为：

• 求值外层装饰器

• 求值内层装饰器

• 调用内层装饰器

• 调用外层装饰器

如下示例所示

function f(key: string) {
  console.log("evaluate: ", key);
  return function () {
    console.log("call: ", key);
  };
}

class C {
  @f("Outer Method")
  @f("Inner Method")
  method() {}
}

/*  输出顺序如下
evaluate: Outer Method
evaluate: Inner Method
call: Inner Method
call: Outer Method
*/

二、Reflect Metadata

1、背景

在 ES6 的规范当中，ES6 支持元编程，核心是因为提供了对 Proxy 和 Reflect 对象的支持。简单来说这个 API 的作用就是可以实现对变量操作的函数化，也就是反射。然而 ES6 的 Reflect 规范里面还缺失一个规范，那就是 Reflect Metadata。这会造成什么样的情境呢？ 由于 JS/TS 现有的 装饰器更多的是存在于对函数或者属性进行一些操作，比如修改他们的值，代理变量，自动绑定 this 等等功能。但是却无法实现通过反射来获取究竟有哪些装饰器添加到这个类/方法上... 这就限制了 JS 中元编程的能力。 此时 Relfect Metadata 就派上用场了，可以通过装饰器来给类添加一些自定义的信息。然后通过反射将这些信息提取出来（当然你也可以通过反射来添加这些信息）。 综合一下， JS 中对 Reflect Metadata 的诉求，简单概括就是：

• 其他 C#、Java、Pythone 语言已经有的高级功能，我 JS 也应该要有（诸如C＃ 和 Java 之类的语言支持将元数据添加到类型的属性或注释，以及用于读取元数据的反射API，而目前 JS 缺少这种能力）

• 许多用例（组合/依赖注入，运行时类型断言，反射/镜像，测试）都希望能够以一致的方式向类中添加其他元数据。

• 为了使各种工具和库能够推理出元数据，需要一种标准一致的方法；

• 元数据不仅可以用在对象上，也可以通过相关捕获器用在 Proxy 上；

• 对开发人员来说，定义新的元数据生成装饰器应该简洁易用；

2、使用

TypeScript 在 1.5+ 的版本已经支持 reflect-metadata，但是我们在使用的时候还需要额外进行安装，如下所示

• npm i reflect-metadata --save

• 在 tsconfig.json 里配置选项 emitDecoratorMetadata: true

关于 reflect-metadata 的基本使用 api 可以阅读 reflect-metadata 文档，其包含常见的增删改查基本功能，我们来看下其基本的使用示例，其中 Reflect.metadata 当作 Decorator 使用，当修饰类时，在类上添加元数据，当修饰类属性时，在类原型的属性上添加元数据，如：

import "reflect-metadata";

@Reflect.metadata('classMetaData', 'A')
class SomeClass {
  @Reflect.metadata('methodMetaData', 'B')
  public someMethod(): string {
    return 'hello someMethod';
  }
}

console.log(Reflect.getMetadata('classMetaData', SomeClass)); // 'A'
console.log(Reflect.getMetadata('methodMetaData', new SomeClass(), 'someMethod')); // 'B

当然跟我们平时看到的 IOC 不同，我们进一步结合装饰器，如下所示，与前面的功能是一样的

import "reflect-metadata";

function classDecorator(): ClassDecorator {
  return target => {
    // 在类上定义元数据，key 为 `classMetaData`，value 为 `a`
    Reflect.defineMetadata('classMetaData', 'A', target);
  };
}

function methodDecorator(): MethodDecorator {
  return (target, key, descriptor) => {
    // 在类的原型属性 'someMethod' 上定义元数据，key 为 `methodMetaData`，value 为 `b`
    Reflect.defineMetadata('methodMetaData', 'B', target, key);
  };
}

@classDecorator()
class SomeClass {
  @methodDecorator()
  someMethod() {}
}

console.log(Reflect.getMetadata('classMetaData', SomeClass)); // 'A'
console.log(Reflect.getMetadata('methodMetaData', new SomeClass(), 'someMethod')); // 'B'

3、design：类型元数据

在 TS 中的 reflect-metadata 的功能是经过增强的，其添加 "design:type"、"design:paramtypes" 和 "design:returntype" 这 3 个类型相关的元数据

• design:type 表示被装饰的对象是什么类型, 比如是字符串、数字、还是函数等；

• design:paramtypes 表示被装饰对象的参数类型, 是一个表示类型的数组, 如果不是函数, 则没有该 key；

• design:returntype 表示被装饰对象的返回值属性, 比如字符串、数字或函数等；

示例如下所示

import "reflect-metadata";

@Reflect.metadata('type', 'class')
class A {  
  constructor(
    public name: string, 
    public age: number
  ) {  }  

  @Reflect.metadata(undefined, undefined)  
  method(name: string, age: number):boolean {    
    return true  
  }
}

  const t1 = Reflect.getMetadata('design:type', A.prototype, 'method')
  const t2 = Reflect.getMetadata('design:paramtypes', A.prototype, 'method')
  const t3 = Reflect.getMetadata('design:returntype', A.prototype, 'method')
  
  console.log(t1)  // [Function: Function]
  console.log(...t2) // [Function: String] [Function: Number]
  console.log(t3) // [Function: Boolean]

三、IOC 容器实现

1、源码解读

我们可以从 github 上克隆 midway 仓库的代码到本地，然后进行代码阅读以及 debug 调试。本篇博文我们主要想探究下 midway 的依赖注入合控制反转是如何实现的，其主要源码存在于两个目录：packages/core 和 packages/decorator，其中 packages/core 包含依赖注入的核心实现，加载对象的class，同步、异步创建对象实例化，对象的属性绑定等。 IOC 容器就像是一个对象池，管理着每个对象实例的信息（Class Definition），所以用户无需关心什么时候创建，当用户希望拿到对象的实例 (Object Instance) 时，可以直接拿到依赖对象的实例，容器会 自动将所有依赖的对象都自动实例化。packages/core 中主要有以下几种，分别处理不同的逻辑：

• AppliationContext 基础容器，提供了基础的增加定义和根据定义获取对象实例的能力；

• MidwayContainer 用的最多的容器，做了上层封装，通过 bind 函数能够方便的生成类定义，midway 从此类开始扩展；

• RequestContainer 用于请求链路上的容器，会自动销毁对象并依赖另一个容器创建实例；

packages/decorator 包含装饰器 provide.ts、inject.ts 的实现，在midwayjs中是有一个装饰器管理类DecoratorManager, 用来管理 midwayjs 的所有装饰器：

• @provide() 的作用是简化绑定，能被 IOC 容器自动扫描，并绑定定义到容器上，对应的逻辑是绑定对象定义；

• @inject() 的作用是将容器中的定义实例化成一个对象，并且绑定到属性中，这样，在调用的时候就可以访问到该属性。

2、简单实现

2.1、装饰器 Provider

实现装饰器 Provider 类，作用为将对应类注册到 IOC 容器中。

import 'reflect-metadata'
import * as camelcase from 'camelcase'
import { class_key } from './constant'

// Provider 装饰的类，表示要注册到 IOC 容器中
export function Provider (identifier?: string, args?: Array<any>) {
  return function (target: any) {
    // 类注册的唯一标识符
    identifier = identifier ?? camelcase(target.name)

    Reflect.defineMetadata(class_key, {
      id: identifier,  // 唯一标识符
      args: args || [] // 实例化所需参数
    }, target)
    return target
  }
}

2.2、装饰器 Inject

实现装饰器 Inject 类，作用为将对应的类注入到对应的地方。

import 'reflect-metadata'
import { props_key } from './constant'

export function Inject () {
  return function (target: any, targetKey: string) {
    // 注入对象
    const annotationTarget = target.constructor
    let props = {}
    // 同一个类，多个属性注入类
    if (Reflect.hasOwnMetadata(props_key, annotationTarget)) {
      props = Reflect.getMetadata(props_key, annotationTarget)
    }

    //@ts-ignore
    props[targetKey] = {
      value: targetKey
    }

    Reflect.defineMetadata(props_key, props, annotationTarget)
  }
}

2.3、管理容器 Container

管理容器 Container 的实现，用于绑定实例信息并且在对应的地方获取它们。

import 'reflect-metadata'
import { props_key } from './constant'

export class Container {
  bindMap = new Map()

  // 绑定类信息
  bind(identifier: string, registerClass: any, constructorArgs: any[]) {
    this.bindMap.set(identifier, {registerClass, constructorArgs})
  }

  // 获取实例，将实例绑定到需要注入的对象上
  get<T>(identifier: string): T {
    const target = this.bindMap.get(identifier)
    if (target) {
      const { registerClass, constructorArgs } = target
      // 等价于 const instance = new registerClass([...constructorArgs])
      const instance = Reflect.construct(registerClass, constructorArgs)

      const props = Reflect.getMetadata(props_key, registerClass)
      for (let prop in props) {
        const identifier = props[prop].value
        // 递归进行实例化获取 injected object
        instance[prop] = this.get(identifier)
      }
      return instance
    }
  }
}

2.4、加载类文件 load

启动时扫描所有文件，获取文件导出的所有类，然后根据元数据进行绑定。

import * as fs from 'fs'
import { resolve } from 'path'
import { class_key } from './constant'

// 启动时扫描所有文件，获取定义的类，根据元数据进行绑定
export function load(container: any, path: string) {
  const list = fs.readdirSync(path)
  for (const file of list) {
    if (/\.ts$/.test(file)) {
      const exports = require(resolve(path, file))

      for (const m in exports) {
        const module = exports[m]
        if (typeof module === 'function') {
          const metadata = Reflect.getMetadata(class_key, module)
          // register
          if (metadata) {
            container.bind(metadata.id, module, metadata.args)
          }
        }
      }
    }
  }
}

2.5、示例类

三个示例类如下所示

// class A
import { Provider } from "../provide"; 
import { Inject } from "../inject"; 
import B from './classB'
import C from './classC'

@Provider('a')
export default class A {
  @Inject()
  private b: B

  @Inject()
  c: C

  print () {
    this.c.print()
  }
}

// class B
import { Provider } from '../provide' 

@Provider('b', [10])
export default class B {
  n: number
  constructor (n: number) {
    this.n = n
  }
}

// class C
import { Provider } from '../provide'

@Provider()
export default class C {
  print () {
    console.log('hello')
  }
}

2.6、初始化

我们能从以下示例结果中看到，我们已经实现了一个基本的 IOC 容器能力。

import { Container } from './container'
import { load } from './load'
import { class_path } from './constant'

const init =  function () {

  const container = new Container()
  // 通过加载，会先执行装饰器（设置元数据），
  // 再由 container 统一管理元数据中，供后续使用
  load(container, class_path)
  const a:any = container.get('a') // A { b: B { n: 10 }, c: C {} }
  console.log(a);
  a.c.print() // hello
}

init()

总结

本文的依次从 TS 装饰器、Reflect Metadata、IOC 容器源码简单解读、以及自定义实现 IOC 容器四个部分由零到一编写自定义 IOC 容器，希望对你有所启发。本文的所有演示实例都已经上传到 github 仓库 ioc-container ，读者可以克隆下来进行调试运行。

作者：我是你的超级英雄
来源：https://juejin.cn/post/7036895697865555982

手写迷你版Vue

参考代码：github.com/57code/vue-…

Vue响应式设计思路

Vue响应式主要包含：

• 数据响应式

• 监听数据变化，并在视图中更新

• Vue2使用Object.defineProperty实现数据劫持

• Vu3使用Proxy实现数据劫持

• 模板引擎

• 提供描述视图的模板语法

• 插值表达式{{}}

• 指令 v-bind, v-on, v-model, v-for,v-if

• 渲染

• 将模板转换为html

• 解析模板，生成vdom，把vdom渲染为普通dom

数据响应式原理

数据变化时能自动更新视图，就是数据响应式 Vue2使用Object.defineProperty实现数据变化的检测

原理解析

• new Vue()⾸先执⾏初始化，对data执⾏响应化处理，这个过程发⽣在Observer中

• 同时对模板执⾏编译，找到其中动态绑定的数据，从data中获取并初始化视图，这个过程发⽣在

Compile中

• 同时定义⼀个更新函数和Watcher实例，将来对应数据变化时，Watcher会调⽤更新函数

• 由于data的某个key在⼀个视图中可能出现多次，所以每个key都需要⼀个管家Dep来管理多个

Watcher

• 将来data中数据⼀旦发⽣变化，会⾸先找到对应的Dep，通知所有Watcher执⾏更新函数

一些关键类说明

CVue：自定义Vue类 Observer：执⾏数据响应化（分辨数据是对象还是数组） Compile：编译模板，初始化视图，收集依赖（更新函数、 watcher创建） Watcher：执⾏更新函数（更新dom） Dep：管理多个Watcher实例，批量更新

涉及关键方法说明

observe: 遍历vm.data的所有属性，对其所有属性做响应式，会做简易判断，创建Observer实例进行真正响应式处理

html页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>cvue</title>
  <script src="./cvue.js"></script>
</head>
<body>
  <div id="app">
    <p>{{ count }}</p>
  </div>

  <script>
    const app = new CVue({
      el: '#app',
      data: {
        count: 0
      }
    })
    setInterval(() => {
      app.count +=1
    }, 1000);
  </script>
</body>
</html>

CVue

• 创建基本CVue构造函数：

• 执⾏初始化，对data执⾏响应化处理

// 自定义Vue类
class CVue {
  constructor(options) {
    this.$options = options
    this.$data = options.data

    // 响应化处理
    observe(this.$data)
  }
}

// 数据响应式, 修改对象的getter,setter
function defineReactive(obj, key, val) {
  // 递归处理，处理val是嵌套对象情况
  observe(val)
  Object.defineProperty(obj, key, {
    get() {
      return val
    },
    set(newVal) {
      if(val !== newVal) {
        console.log(`set ${key}:${newVal}, old is ${val}`)

        val = newVal
        // 继续进行响应式处理，处理newVal是对象情况
        observe(val)
      }
    }
  })
}

// 遍历obj，对其所有属性做响应式
function observe(obj) {
  // 只处理对象类型的
  if(typeof obj !== 'object' || obj == null) {
    return
  }
  // 实例化Observe实例
  new Observe(obj)
}

// 根据传入value的类型做相应的响应式处理
class Observe {
  constructor(obj) {
    if(Array.isArray(obj)) {
      // TODO
    } else {
      // 对象
      this.walk(obj)
    }
  }
  walk(obj) {
    // 遍历obj所有属性，调用defineReactive进行响应化
    Object.keys(obj).forEach(key => defineReactive(obj, key, obj[key]))
  }
}

为vm.$data做代理

方便实例上设置和获取数据

例如

原本应该是

vm.$data.count
vm.$data.count = 233

代理之后后，可以使用如下方式

vm.count
vm.count = 233

给vm.$data做代理

class CVue {
  constructor(options) {
    // 省略
    // 响应化处理
    observe(this.$data)

    // 代理data上属性到实例上
    proxy(this)
  }
}

// 把CVue实例上data对象的属性到代理到实例上
function proxy(vm) {
  Object.keys(vm.$data).forEach(key => {
    Object.defineProperty(vm, key, {
      get() {
        // 实现 vm.count 取值
        return vm.$data[key]
      },
      set(newVal) {
        // 实现 vm.count = 123赋值
        vm.$data[key] = newVal
      }
    })
  })
}

编译

初始化视图

根据节点类型进行编译

class CVue {
  constructor(options) {
    // 省略。。
    // 2 代理data上属性到实例上
    proxy(this)

    // 3 编译
    new Compile(this, this.$options.el)
  }
}

// 编译模板中vue语法，初始化视图，更新视图
class Compile {
  constructor(vm, el) {
    this.$vm = vm
    this.$el = document.querySelector(el)

    if(this.$el) {
      this.complie(this.$el)
    }
  }
  // 编译
  complie(el) {
    // 取出所有子节点
    const childNodes = el.childNodes
    // 遍历节点，进行初始化视图
    Array.from(childNodes).forEach(node => {
      if(this.isElement(node)) {
        // TODO
        console.log(`编译元素 ${node.nodeName}`)
      } else if(this.isInterpolation(node)) {
        console.log(`编译插值文本 ${node.nodeName}`)
      }
      // 递归编译，处理嵌套情况
      if(node.childNodes) {
        this.complie(node)
      }
    })
  }
  // 是元素节点
  isElement(node) {
    return node.nodeType === 1
  }
  // 是插值表达式
  isInterpolation(node) {
    return node.nodeType === 3
      && /\{\{(.*)\}\}/.test(node.textContent)
  }
}

编译插值表达式

// 编译模板中vue语法，初始化视图，更新视图
class Compile {
  complie(el) {
    Array.from(childNodes).forEach(node => {
      if(this.isElement(node)) {
        console.log(`编译元素 ${node.nodeName}`)
      } else if(this.isInterpolation(node)) {
        // console.log(`编译插值文本 ${node.textContent}`)
        this.complieText(node)
      }
      // 省略
    })
  }
  // 是插值表达式
  isInterpolation(node) {
    return node.nodeType === 3
      && /\{\{(.*)\}\}/.test(node.textContent)
  }
  // 编译插值
  complieText(node) {
    // RegExp.$1是isInterpolation()中/\{\{(.*)\}\}/匹配出来的组内容
    // 相等于{{ count }}中的count
    const exp = String(RegExp.$1).trim()
    node.textContent = this.$vm[exp]
  }
}

编译元素节点和指令

需要取出指令和指令绑定值 使用数据更新视图

// 编译模板中vue语法，初始化视图，更新视图
class Compile {
  complie(el) {
    Array.from(childNodes).forEach(node => {
      if(this.isElement(node)) {
        console.log(`编译元素 ${node.nodeName}`)
        this.complieElement(node)
      }
      // 省略
    })
  }
  // 是元素节点
  isElement(node) {
    return node.nodeType === 1
  }
  // 编译元素
  complieElement(node) {
    // 取出元素上属性
    const attrs = node.attributes
    Array.from(attrs).forEach(attr => {
      // c-text="count"中c-text是attr.name，count是attr.value
      const { name: attrName, value: exp } = attr
      if(this.isDirective(attrName)) {
        // 取出指令
        const dir = attrName.substring(2)
        this[dir] && this[dir](node, exp)
      }
    })
  }
  // 是指令
  isDirective(attrName) {
    return attrName.startsWith('')
  }
  // 处理c-text文本指令 
  text(node, exp) {
    node.textContent = this.$vm[exp]
  }
  // 处理c-html指令
  html(node, exp) {
    node.innerHTML = this.$vm[exp]
  }
}

以上完成初次渲染，但是数据变化后，不会触发页面更新

依赖收集

视图中会⽤到data中某key，这称为依赖。 同⼀个key可能出现多次，每次出现都需要收集(⽤⼀个Watcher来维护维护他们的关系)，此过程称为依赖收集。 多个Watcher需要⼀个Dep来管理，需要更新时由Dep统⼀通知。

• data中的key和dep是一对一关系

• 视图中key出现和Watcher关系，key出现一次就对应一个Watcher

• dep和Watcher是一对多关系

实现思路

• 在defineReactive中为每个key定义一个Dep实例

• 编译阶段，初始化视图时读取key, 会创建Watcher实例

• 由于读取过程中会触发key的getter方法，便可以把Watcher实例存储到key对应的Dep实例中

• 当key更新时，触发setter方法，取出对应的Dep实例，Dep实例调用notiy方法通知所有Watcher更新

定义Watcher类

监听器，数据变化更新对应节点视图

// 创建Watcher监听器，负责更新视图
class Watcher {
  // vm vue实例，依赖key，updateFn更新函数(编译阶段传递进来)
  constructor(vm, key, updateFn) {
    this.$vm = vm
    this.$key = key
    this.$updateFn = updateFn
  }
  update() {
    // 调用更新函数，获取最新值传递进去
    this.$updateFn.call(this.$vm, this.$vm[this.$key])
  }
}

修改Compile类中的更新函数，创建Watcher实例

class Complie {
  // 省略。。。
  // 编译插值
  complieText(node) {
    // RegExp.$1是isInterpolation()中/\{\{(.*)\}\}/匹配出来的组内容
    // 相等于{{ count }}中的count
    const exp = String(RegExp.$1).trim()
    // node.textContent = this.$vm[exp]
    this.update(node, exp, 'text')
  }
  // 处理c-text文本指令 
  text(node, exp) {
    // node.textContent = this.$vm[exp]
    this.update(node, exp, 'text')
  }
  // 处理c-html指令
  html(node, exp) {
    // node.innerHTML = this.$vm[exp]
    this.update(node, exp, 'html')
  }
  // 更新函数
  update(node, exp, dir) {
    const fn = this[`${dir}Updater`]
    fn && fn(node, this.$vm[exp])

    // 创建监听器
    new Watcher(this.$vm, exp, function(newVal) {
      fn && fn(node, newVal)
    })
  }
  // 文本更新器
  textUpdater(node, value) {
    node.textContent = value
  }
  // html更新器
  htmlUpdater(node, value) {
    node.innerHTML = value
  }
}

定义Dep类

• data的一个属性对应一个Dep实例

• 管理多个Watcher实例，通知所有Watcher实例更新

// 创建订阅器，每个Dep实例对应data中的一个属性
class Dep {
  constructor() {
    this.deps = []
  }
  // 添加Watcher实例
  addDep(dep) {
    this.deps.push(dep)
  }
  notify() {
    // 通知所有Wather更新视图
    this.deps.forEach(dep => dep.update())
  }
}

创建Watcher时触发getter

class Watcher {
  // vm vue实例，依赖key，updateFn更新函数(编译阶段传递进来)
  constructor(vm, key, updateFn) {
    // 省略
    // 把Wather实例临时挂载在Dep.target上
    Dep.target = this
    // 获取一次属性，触发getter, 从Dep.target上获取Wather实例存放到Dep实例中
    this.$vm[key]
    // 添加后，重置Dep.target
    Dep.target = null
  }
}

defineReactive中作依赖收集，创建Dep实例

function defineReactive(obj, key, val) {
  // 递归处理，处理val是嵌套对象情况
  observe(val)

  const dep = new Dep()
  Object.defineProperty(obj, key, {
    get() {
      Dep.target && dep.addDep(Dep.target)
      return val
    },
    set(newVal) {
      if(val !== newVal) {
        val = newVal
        // 继续进行响应式处理，处理newVal是对象情况
        observe(val)
        // 更新视图
        dep.notify()
      }
    }
  })
}

监听事件指令@xxx

• 在创建vue实例时，需要缓存methods到vue实例上

• 编译阶段取出methods挂载到Compile实例上

• 编译元素时

• 识别出v-on指令时，进行事件的绑定

• 识别出@属性时，进行事件绑定

• 事件绑定：通过指令或者属性获取对应的函数，给元素新增事件监听，使用bind修改监听函数的this指向为组件实例

// 自定义Vue类
class CVue {
  constructor(options) {
    this.$methods = options.methods
  }
}

// 编译模板中vue语法，初始化视图，更新视图
class Compile {
  constructor(vm, el) {
    this.$vm = vm
    this.$el = document.querySelector(el)
    this.$methods = vm.$methods
  }

  // 编译元素
  complieElement(node) {
    // 取出元素上属性
    const attrs = node.attributes
    Array.from(attrs).forEach(attr => {
      // c-text="count"中c-text是attr.name，count是attr.value
      const { name: attrName, value: exp } = attr
      if(this.isDirective(attrName)) {
        // 省略。。。
        if(this.isEventListener(attrName)) {
          // v-on:click, subStr(5)即可截取到click
          const eventType = attrName.substring(5)
          this.bindEvent(eventType, node, exp)
        }
      } else if(this.isEventListener(attrName)) {
        // @click, subStr(1)即可截取到click
        const eventType = attrName.substring(1)
        this.bindEvent(eventType, node, exp)
      }
    })
  }
  // 是事件监听
  isEventListener(attrName) {
    return attrName.startsWith('@') || attrName.startsWith('c-on')
  }
  // 绑定事件
  bindEvent(eventType, node, exp) {
    // 取出表达式对应函数
    const method = this.$methods[exp]
    // 增加监听并修改this指向当前组件实例
    node.addEventListener(eventType, method.bind(this.$vm))
  }
}

v-model双向绑定

实现v-model绑定input元素时的双向绑定功能

// 编译模板中vue语法，初始化视图，更新视图
class Compile {
  // 省略...
  // 处理c-model指令
  model(node, exp) {
    // 渲染视图
    this.update(node, exp, 'model')
    // 监听input变化
    node.addEventListener('input', (e) => {
      const { value } = e.target
      // 更新数据，相当于this.username = 'mio'
      this.$vm[exp] = value
    })
  }
  // model更新器
  modelUpdater(node, value) {
    node.value = value
  }
}

数组响应式

• 获取数组原型

• 数组原型创建对象作为数组拦截器

• 重写数组的7个方法

// 数组响应式
// 获取数组原型, 后面修改7个方法
const originProto  = Array.prototype
// 创建对象做备份，修改响应式都是在备份的上进行，不影响原始数组方法
const arrayProto = Object.create(originProto)
// 拦截数组方法，在变更时发出通知
;['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(method => {
  // 在备份的原型上做修改
  arrayProto[method] = function() {
    // 调用原始操作
    originProto[method].apply(this, arguments)
    // 发出变更通知
    console.log(`method:${method} value:${Array.from(arguments)}`)
  }
})

class Observe {
  constructor(obj) {
    if(Array.isArray(obj)) {
      // 修改数组原型为自定义的
      obj.__proto__ = arrayProto
      this.observeArray(obj)
    } else {
      // 对象
      this.walk(obj)
    }
  }
  observeArray(items) {
    // 如果数组内部元素时对象，继续做响应化处理
    items.forEach(item => observe(item))
  }
}

作者：LastStarDust
来源：https://juejin.cn/post/7036291383153393701

前言

相信大部分同学在日常需求开发中或多或少的会有需要一个组件状态被持久化、不被重新渲染的场景，熟悉 vue 的同学一定会想到 keep-alive 这个内置组件。

那么什么是 keep-alive 呢？

keep-alive 是 Vue.js 的一个 内置组件。它能够将不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实 DOM 中，也不会出现在父组件链中。简单的说，keep-alive用于保存组件的渲染状态，避免组件反复创建和渲染，有效提升系统性能。 keep-alive 的 max 属性，用于限制可以缓存多少组件实例，一旦这个数字达到了上限，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉，而这里所运用到的缓存机制就是 LRU 算法

LRU 缓存淘汰算法

LRU（ least recently used）根据数据的历史记录来淘汰数据，重点在于保护最近被访问/使用过的数据，淘汰现阶段最久未被访问的数据

LRU的主体思想在于：如果数据最近被访问过,那么将来被访问的几率也更高

1. 新数据插入到链表尾部；

2. 每当缓存命中（即缓存数据被访问），则将数据移到链表尾部

3. 当链表满的时候，将链表头部的数据丢弃。

实现LRU的数据结构

经典的 LRU 一般都使用 hashMap + 双向链表。考虑可能需要频繁删除一个元素，并将这个元素的前一个节点指向下一个节点，所以使用双链接最合适。并且它是按照结点最近被使用的时间顺序来存储的。 如果一个结点被访问了， 我们有理由相信它在接下来的一段时间被访问的概率要大于其它结点。

不过既然已经在 js 里都已经使用 Map 了，何不直接取用现成的迭代器获取下一个结点的 key 值（keys().next( )）

// ./LRU.ts
export class LRUCache {
  capacity: number; // 容量
  cache: Map; // 缓存
  constructor(capacity: number) {
    this.capacity = capacity;
    this.cache = new Map();
  }
  get(key: number): number {
    if (this.cache.has(key)) {
      let temp = this.cache.get(key) as number;
      //访问到的 key 若在缓存中，将其提前
      this.cache.delete(key);
      this.cache.set(key, temp);
      return temp;
    }
    return -1;
  }
  put(key: number, value: number): void {
    if (this.cache.has(key)) {
      this.cache.delete(key);
      //存在则删除，if 结束再提前
    } else if (this.cache.size >= this.capacity) {
      // 超过缓存长度,淘汰最近没使用的
      this.cache.delete(this.cache.keys().next().value);
      console.log(`refresh: key:${key} , value:${value}`)
    }
    this.cache.set(key, value);
  }
  toString(){
    console.log('capacity',this.capacity)
    console.table(this.cache)
  }
}

// ./index.ts
import {LRUCache} from './lru'
const list = new LRUCache(4)
list.put(2,2)   // 入 2，剩余容量3
list.put(3,3)   // 入 3，剩余容量2
list.put(4,4)   // 入 4，剩余容量1
list.put(5,5)   // 入 5，已满    从头至尾         2-3-4-5
list.put(4,4)   // 入4，已存在 ——> 置队尾         2-3-5-4
list.put(1,1)   // 入1，不存在 ——> 删除队首 插入1  3-5-4-1
list.get(3)     // 获取3，刷新3——> 置队尾         5-4-1-3
list.toString()

// ./index.ts
import {LRUCache} from './lru'
const list = new LRUCache(4)

list.put(2,2)   // 入 2，剩余容量3
list.put(3,3)   // 入 3，剩余容量2
list.put(4,4)   // 入 4，剩余容量1
list.put(5,5)   // 入 5，已满    从头至尾               2-3-4-5
list.put(4,4)   // 入4，已存在 ——> 置队尾               2-3-5-4
list.put(1,1)   // 入1，不存在 ——> 删除队首 插入1  3-5-4-1
list.get(3)     // 获取3，刷新3——> 置队尾               5-4-1-3
list.toString()

结果如下：

vue 中 Keep-Alive

原理

1. 使用 LRU 缓存机制进行缓存，max 限制缓存表的最大容量

2. 根据设定的 include/exclude（如果有）进行条件匹配,决定是否缓存。不匹配,直接返回组件实例

3. 根据组件 ID 和 tag 生成缓存 Key ,并在缓存对象中查找是否已缓存过该组件实例。如果存在,直接取出缓存值并更新该 key 在 this.keys 中的位置(更新 key 的位置是实现 LRU 置换策略的关键)

4. 获取节点名称，或者根据节点 cid 等信息拼出当前 组件名称

5. 获取 keep-alive 包裹着的第一个子组件对象及其组件名

源码分析

初始化 keepAlive 组件

const KeepAliveImpl: ComponentOptions = {
  name: `KeepAlive`,
  props: {
    include: [String, RegExp, Array],
    exclude: [String, RegExp, Array],
    max: [String, Number],
  },
  setup(props: KeepAliveProps, { slots }: SetupContext) {
    // 初始化数据
    const cache: Cache = new Map();
    const keys: Keys = new Set();
    let current: VNode | null = null;
    // 当 props 上的 include 或者 exclude 变化时移除缓存
    watch(
      () => [props.include, props.exclude],
      ([include, exclude]) => {
      include && pruneCache((name) => matches(include, name));
      exclude && pruneCache((name) => !matches(exclude, name));
      },
      { flush: "post", deep: true }
    );
    // 缓存组件的子树 subTree
    let pendingCacheKey: CacheKey | null = null;
    const cacheSubtree = () => {
      // fix #1621, the pendingCacheKey could be 0
      if (pendingCacheKey != null) {
        cache.set(pendingCacheKey, getInnerChild(instance.subTree));
      }
    };
    // KeepAlive 组件的设计，本质上就是空间换时间。
    // 在 KeepAlive 组件内部，
    // 当组件渲染挂载和更新前都会缓存组件的渲染子树 subTree
    onMounted(cacheSubtree);
    onUpdated(cacheSubtree);
    onBeforeUnmount(() => {
    // 卸载缓存表里的所有组件和其中的子树...
    }
    return ()=>{
      // 返回 keepAlive 实例
    }
  }
}

return ()=>{
  // 省略部分代码，以下是缓存逻辑
  pendingCacheKey = null
  const children = slots.default()
  let vnode = children[0]
  const comp = vnode.type as Component
  const name = getName(comp)
  const { include, exclude, max } = props
  // key 值是 KeepAlive 子节点创建时添加的，作为缓存节点的唯一标识
  const key = vnode.key == null ? comp : vnode.key
  // 通过 key 值获取缓存节点
  const cachedVNode = cache.get(key)
  if (cachedVNode) {
    // 缓存存在，则使用缓存装载数据
    vnode.el = cachedVNode.el
    vnode.component = cachedVNode.component
    if (vnode.transition) {
      // 递归更新子树上的 transition hooks
      setTransitionHooks(vnode, vnode.transition!)
    }
      // 阻止 vNode 节点作为新节点被挂载
      vnode.shapeFlag |= ShapeFlags.COMPONENT_KEPT_ALIVE
      // 刷新key的优先级
      keys.delete(key)
      keys.add(key)
  } else {
      keys.add(key)
      // 属性配置 max 值，删除最久不用的 key ，这很符合 LRU 的思想
      if (max && keys.size > parseInt(max as string, 10)) {
        pruneCacheEntry(keys.values().next().value)
      }
    }
    // 避免 vNode 被卸载
    vnode.shapeFlag |= ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
    current = vnode
    return vnode;
}