mpvue 开发框架介绍和最佳实践 ���Vue.js������� 美团酒旅 - 终端研发组 - 基础服务平台 动态化技术⽅方向，⼩小程序应⽤用、RN 应⽤用 努⼒力力于⼩小程序⼯工程化开发、业务级应⽤用 ������美团点评 ⽬目录 CONTENTS mpvue 介绍 使⽤用⽅方式 设计思路路 实践 & 展望 1 mpvue 介绍 作为⼩小程序应⽤用开发框架，mpvue 具有什什么特点？为开发者 带来了了是什什么？当前社区的反馈如何？ mpvue 是什什么 使⽤用 Vue.js 开发⼩小程序的前端框架 Vue.js 代码 ⼩小程序代码 ⼯工程化体系集成 cli 命令⾏行行⼯工具 编译构建集成 ⽣生态扩展能⼒力力 npm 管理理⽀支持 Vue 组件机制 开发规范扩展 Vue 编码规范 Vue 语法⽀支持 Vue 引擎驱动 mpvue 的能⼒力力 好扩展 前端赋能 易易学习 超低上⼿手 成本 多端复⽤用 技术沉淀收益规 模化 提⾼高开发效率 减少重复劳动 ⾃自动化构建 组件化开发 企业级开发核⼼心能⼒力力 适⽤用⼤大型项⽬目重要 uni-app 终极跨解决⽅方案 100 packages 《如何看待美团开源的 mpvue》 知乎阅读数 22万 京东，360，滴滴使⽤用，⽀支付宝⼩小程序合作 技术交流群

安装 介绍 应用 & 组件实例 模板语法 Data Properties and Methods 计算属性和侦听器 Class 与 Style 绑定 条件渲染 列表渲染 事件处理 表单输入绑定 组件基础 深入组件 组件注册 Props 非 Prop 的 Attribute 自定义事件 插槽 提供 / 注入 动态组件 & 异步组件 模板引用 处理边界情况 中的更改检测警告 工具 单文件组件 测试 TypeScript 支持 Mobile 规模化 路由 状态管理 服务端渲染 无障碍 基础 语义学 标准 资源 从 Vue 2 迁移 介绍 v-for 中的 Ref 数组 异步组件 attribute 强制行为 自定义指令 自定义元素交互 Data 选项 事件 API 过滤器 片段 函数式组件 - 3 - 本文档使用 致谢 - 5 - 本文档使用 书栈网 · BookStack.CN 构建 安装 介绍 应用 & 组件实例 模板语法 Data Properties and Methods 计算属性和侦听器 Class 与 Style 绑定 条件渲染 列表渲染 事件处理 表单输入绑定 组件基础 基础 - 6 - 本文档使用 书栈网 · BookStack.CN 构建 Vue.js 在设

Ant Design Vue 对比测评，哪个更好？》 Vue 3 发布后，各家第三方库开始陆续重构并支持 Vue 3 ，国内两大知名框架 Element Plus 和 Ant esign Vue 也相续发布新版支持 Vue 3。到底应该怎么选择呢？本文从多个纬度对两个框架进行对比 测评。 原文链接：Element Plus 和 Ant Design Vue 对比测评，哪个更好？ Element Plus 入门教程》 框架版本对 Vue 的支持 ● Element UI 支持 Vue 2 ● Element Plus 支持 Vue 3 ● Ant Design Vue 1.x 支持 Vue 2 ● Ant Design Vue 3.x 支持 Vue 3 Element Plus 是为了适配 Vue 3 对 Element UI 进行的重构。Vue 3.0 的这次大版本升级，对于第 方组件库来说是 浏览器兼容性 Element Plus 和 Ant Design Vue 3 都已不在支持 IE 了，并不是他们自己放弃了 IE 而是 Vue 3 本 已经放弃了 IE。如果想在低版本浏览器上正常使用这两个框架，可使用 Babel、ESBuild 或其他转换 原文链接：Element Plus 和 Ant Design Vue 对比测评，哪个更好？ 具，并引入相应的 polyfill。 Element

们有着丰富的前端经验，也热衷于技术的开源与 分享。每年，我们都会举办自己的前端大会 ——IMWebConf。 会议日程 会议日程 大会流程： 大会流程： Node.js会场 会场 框架性能会场 框架性能会场 综合会场 综合会场 会议嘉宾 会议嘉宾 姓名 姓名 个人介绍 个人介绍 主题 主题 主题介绍 主题介绍 Philippe Le Hégaret Philippe Le 心内容，覆盖最新技术栈， 大局观和最佳实践 姜天意 姜天意，昵称99，阿里巴巴零售通事业部前端 技术专家 Web安全风险与Node 框架安全方案介绍 深入浅出的介绍的常见的安 全问题，一些不常见的安全 问题，以及对应的防范方 法。开发一个Node框架，需 要考虑哪些安全方面的问 题？相信你会得到一些答 案。 张小春 小春现任摩拜科技前端负责人，之前滴滴公共 前端团队负责人，再之前的最近的经历主要在 Fiber 天猪 阿里游戏前端负责人，EggJS 核心开发者。 Egg & Node.js 从小 工坊走向企业级开发 Egg 是阿里 Node.js 的核心 基础框架，通过「微内核 + 插件机制 + 框架定制能 力」，完美达成生态共建和 差异化定制的平衡点。Egg 已开源近一年，本次分享将 介绍 Egg 的设计理念和特 点，演示在团队里如何渐进 式演进，希望能帮助开发者

可动态发布 能⼒力力强 体验好 Hippy 简介 腾讯 Hippy 动态运营解决⽅方案由 Hippy SDK 与 Hippy 管理理平台 组成： • Hippy SDK 是⼀一套多端统⼀一的开发框架，它能通过 JavaScript ⾼高效率地开发出：跨平台（安卓/iOS/ Web）、⾼高性能的原⽣生应⽤用，尤其适合需要快速迭代⼜又追求⾼高性能的产品。 • Hippy 管理理平台 涵盖编译、 ⾼高级特性。 Android Platform iOS Platform Web Platform React.js Library Vue.js Library 前端主导 ⽀支持最流⾏行行的框架 向阳⽽而⽣生 代码即将对外开源 （ 发布平台） User Code JavaScript Hippy 底层三⼤大特性 ⾼高性能可复⽤用滚动列列表 层：提供业务代码运⾏行行时的前端上下⽂文环境； • Native Framework 层：负责前终端通讯与 JavaScript VM，并提供 Native 相关模块； • Portable UI 层：提供基础 UI 组件与布局计算框架，并负责渲染⾄至⽬目标平台； Layout/Style Hippy Layout Text Component Text... Component Node Render Portable

Evolution “Just a view layer library” “Just a view layer library” The Progressive Framework 渐进式框架 今天 Today 53,986 GitHub Stars Top 10 All-Time 每月 55 万+ 次 NPM 下载 不包括中国镜像数据 Chrome 开发者插件 17.4 万周活跃用户 rel="preload/prefetch"> 链接 Vue SSR 完全指南 https://ssr.vuejs.org 2.3 异步组件改进 ● Loading / Error / Timeout fallback 2.3 函数式组件改进 ● 不再需要显式声明 props ● 父组件添加的 v-on 会以 ctx.listeners 的形式提供 2.3 其他改进 ● passive 事件侦听: @touchmove 更好的测试方案 长期展望 ● 单文件组件 CSS 改进：>>> 和 ::slotted 选择器， CSS variable theming ● 基于 Proxy 的响应式系统重构 ○ 不再需要 Vue.set 或者 this.$set ○ Lazy observation ○ 显式构建响应式对象 ● HTML Modules: 类似单文件组件的新标准（由 Google 起草中） ●

图灵完备性 • 图灵完备：“可计算性” • 命令式的图灵完备性：if/for， if/goto • 声明式的图灵完备性：if/递归 Vue的Template的图灵完备性 • 实际上Vue的组件系统具有图灵完备性 • 使⽤用Vue计算阶乘 • 使⽤用Vue计算斐波那契数列列 声明式与UI编程 UI编程 • 70年年代 MVC诞⽣生 ⼈人们意识到视图应该被独⽴立抽象 • 80年年代 2000年年后 markup language+ programming language • 2009年年 “HTML5” 声明式优势 • 可视化的“可逆性” • 声明式与可再绑定性 • 听说近年年某框架把html和css塞回JS了了？ 可重复绑定性 • recycle-list item item item item item item item item item item

Johann Backers 在 GitHub 上赞助我 Vue Composition API 组合式 API 什么是组合式 API? 在 Vue 3 中引⼊的⼀种新的编写 Vue 组件的⽅式。