MPVue

[emilyzfive]

思想

拿 vue-template-complier 分析出来的 AST，一一映射成小程序语法，拆分成小程序的文件结构

核心能力/难点：

• vue.js 维护一套完整的逻辑视图层代码，此外，单独为小程序构建出一套视图层代码，用于小程序视图的生成。
• 小程序 Page 实例和 Vue 实例生命周期互通。Pages 生命周期内设置 hook 调用 Vue 生命周期函数，期间所有数据从 Vue 实例上获取。
• 事件触发在小程序节点上，事件响应函数存在 Vue.js 中，要做到二者相互联系。做法是，在小程序标签上的事件响应函数，都统一到一个特定的事件代理函数，在函数内通过当前标签上下文信息映射到与之对应的 Vue.js 事件函数。
  mpvue 结合了编译时和运行时的方案；编译时主要处理 template、style，具体的编译过程依赖 AST 技术。

vue 中的 script 部分，则在运行时进行处理。VNode diff 后，不再进行 patch 操作，
小程序隔离了渲染进程（渲染层）和逻辑进程（逻辑层），我们不需要处理渲染层，只需要调用 setData() 方法，更新一份最新的数据就可以了。

taro

类React 小程序，难点在于如何将 jsx 转换为小程序模板，JSX 过于灵活，单纯基于 AST（抽象语法树）技术很难进行一对一转换。

在初始化阶段以及第一次 mount 时，我们通过 setData() 方法初始化小程序。具体是通过递归数据结构，渲染小程序页面。接着，在数据发生变化时，我们通过 React reconciler （负责 diff 算法）阶段的计算信息，以及自定义配置的 HostConfig 衔接函数，更新数据，并通过 setData() 方法触发小程序的渲染更新。

HostConfig 是宿主环境配置，不同平台的 renderers 在 HostConfig 中内置基本方法（比如 appendChild、removeChild、insertBefore），就可以构造自己的渲染逻辑

React 支持多端小程序的架构设计

Taro next 如何实现的？
Taro 团队提供 taro-react 包，用来连接 React reconciler 和 taro-runtime，它主要负责：

• 实现 HostConfig 配置
• 实现 render 函数

trao next 架构图