安装 介绍 应用 & 组件实例 模板语法 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 在设

的联合创始人。于 2010 年 开发了三款 Facebook 平台的应用，获取了超 过 2 千万的用户。2012 年创立了市面上最简易 的建站平台 Strikingly，成为第一家进入 YC 孵 化器的华人团队。 Inside React Fiber 天猪 阿里游戏前端负责人，EggJS 核心开发者。 Egg & Node.js 从小 工坊走向企业级开发 Egg 是阿里 Node.js 张成文，前IMWEB团队成员，对现代前端技术 体系有较深的理解，曾参与腾讯课堂、手Q会 员，吃喝玩乐，now直播等多项业务，具有较 丰富架构经验，著有书籍《现代前端技术解 析》 React组件的运行质 量监控方案 主要讲解react组件异常日志 的捕获方式与性能问题，包 括全局捕获、入侵式捕获和 无痕方式捕获。帮助react组 件开发者调试和线上质量改 进 WebAssembly作为一种新的 面向web的二进制格式，从 者更好的理解小程序的实现 逻辑和更快速的解决问题。 lexiao(肖乐) 肖乐 14年加入腾讯，期间参与pc 空 间，mobile空间，企鹅FM前端开发，同时负责 将WebSocket作为基础能力集成到TSW组件 里，并为qcloud的小程序打包方案提供 WebSocket双工通信服务，本次主要分享 WebSocket基础，socket.io的多机多进程部 署，ws在TSW里的应用，心跳检测，多机多进

mpvue 开发框架介绍和最佳实践 ���Vue.js������� 美团酒旅 - 终端研发组 - 基础服务平台 动态化技术⽅方向，⼩小程序应⽤用、RN 应⽤用 努⼒力力于⼩小程序⼯工程化开发、业务级应⽤用 ������美团点评 ⽬目录 CONTENTS mpvue 介绍 使⽤用⽅方式 设计思路路 实践 & 展望 1 mpvue 介绍 作为⼩小程序应⽤用开发框架，mpvue ⼩小程序代码 ⼯工程化体系集成 cli 命令⾏行行⼯工具 编译构建集成 ⽣生态扩展能⼒力力 npm 管理理⽀支持 Vue 组件机制 开发规范扩展 Vue 编码规范 Vue 语法⽀支持 Vue 引擎驱动 mpvue 的能⼒力力 好扩展 前端赋能 易易学习 超低上⼿手 成本 多端复⽤用 技术沉淀收益规 模化 提⾼高开发效率 减少重复劳动 ⾃自动化构建 组件化开发 企业级开发核⼼心能⼒力力 了了解⼩小程序能⼒力力 & 边界 了了解 Vue.js 特性 了了解前端构建 mpvue 做什什么 & 不不做什什么 设计⼀一种编码⽅方式 确定⼀一套语法集合 内置编译构建⼯工具 推荐示例例项⽬目模板 UI 组件库 常⽤用⼯工具库 第三⽅方平台⽀支持 H5 差异抹平和适配 mpvue only mpvue 为主 mpvue 做增量量开发 使⽤用场景 • 官⽅方标准使⽤用⽅方式 • 从零构建⼩小程序项⽬目

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 SSR + webpack code split 完美支持 （不再局限于路由） vue-cli 3.0 ● 配置依赖化 + 可组合 ● PWA by default ● 一个模板，不同参数 (--ts, --ssr) ● 更好的测试方案 长期展望 ● 单文件组件 CSS 改进：>>> 和 ::slotted 选择器， CSS variable theming ● 基于 Proxy Proxy 的响应式系统重构 ○ 不再需要 Vue.set 或者 this.$set ○ Lazy observation ○ 显式构建响应式对象 ● HTML Modules: 类似单文件组件的新标准（由 Google 起草中） ● 与 Web Components 的兼容

模板引擎(JSX template) ⽣生命周期 Ref引⽤用 模板 单⽂文件 template JSX loader createElement cloneElement、Vnode 属性、⾼高阶组件 JSX https://github.com/vuejs/babel-plugin-transform-vue-jsx https://zhuanlan.zhihu.com/p/37920151 ef Ant Design Vue https://github.com/vueComponent/ant-design-vue 现状 52个组件 单测覆盖率86% Star 3000+ 特⾊色 受控/⾮非受控组件 基于组件的国际化配置(36种语⾔言包) 共享Antd设计资源(Sketch、Axure等) ⼀一致的API 未来规划 提升单测覆盖率 TypeScript⽀支持

Native 开发效率低 ⽆无法跨平台 发布复杂 体验好 能⼒力力强 传统移动端开发模式，⽆无法满⾜足业务精细化运营需求，急需寻找⼀一种⾼高性能、跨平台、动态发布的开发解决⽅方案。 前终端⼀一体化 开发效率⾼高 ⽀支持双平台 可动态发布 能⼒力力强 体验好 Hippy 简介 腾讯 Hippy 动态运营解决⽅方案由 Hippy SDK 与 Hippy 管理理平台 组成： • Hippy 层：提供业务代码运⾏行行时的前端上下⽂文环境； • Native Framework 层：负责前终端通讯与 JavaScript VM，并提供 Native 相关模块； • Portable UI 层：提供基础 UI 组件与布局计算框架，并负责渲染⾄至⽬目标平台； Layout/Style Hippy Layout Text Component Text... Component Node Render Portable 层：提供业务代码运⾏行行时的前端上下⽂文环境； • Native Framework 层：负责前终端通讯与 Javascript VM，并提供 Native 相关模块； • Portable UI 层：提供基础 UI 组件与布局计算框架，并负责渲染⾄至⽬目标平台； Layout/Style Hippy Layout Text Component Text... Component Node Render Portable

声明式的图灵完备性：if/递归 Vue的Template的图灵完备性 • 实际上Vue的组件系统具有图灵完备性 • 使⽤用Vue计算阶乘 • 使⽤用Vue计算斐波那契数列列 声明式与UI编程 UI编程 • 70年年代 MVC诞⽣生 ⼈人们意识到视图应该被独⽴立抽象 • 80年年代 标记语⾔言⼤大热 最初更更与⽂文本相关 • 90年年代 可视化编辑器器出现 “独⽴立的UI代码⽂文件” • 2000年年后 markup markup language+ programming language • 2009年年 “HTML5” 声明式优势 • 可视化的“可逆性” • 声明式与可再绑定性 • 听说近年年某框架把html和css塞回JS了了？ 可重复绑定性 • recycle-list item item item item item item item item item item

2 ● Ant Design Vue 3.x 支持 Vue 3 Element Plus 是为了适配 Vue 3 对 Element UI 进行的重构。Vue 3.0 的这次大版本升级，对于第 方组件库来说是一件好事，那些已经修修补补无数次，还无法彻底解决的问题，在这次面向 Vue 3.0 构时，一次性全部解决。 Ant Design Vue 1.x 仅支持 Vue 2 ，2.x 是为了 Vue ResizeObserver，如有兼容性需求可自行引入 resize-observer-polyfill。详 请参阅 ResizeObserver 的兼容性。 组件功能与特点 Element Plus 共 68 个组件，Ant Design Vue 3.x 共 64 个组件。 ● table 组件：Element Plus 自带 virtual scroll ，Ant Design Vue 需要购买 Surely 这个高级包。 Design Vue 里，Modal.confirm 某些 api 不支持 promise 写法，需要写在回调函数里 ● TreeSelect 组件：Ant Design tree 组件写自定义内容不方便。而 Element 更好用。 ● form 表单组件：两个框架功能基本一致，包含数据收集，表单校验和提交功能。 input、checkb x 、select 等常用功能两个框架都有。 ● Ant

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