Vue 2017 现状与展望 尤雨溪 @VueConf Beijing 2017.05.20 起源 Origination First commit 2013.06.27 First appearance of “Vue” 2013.12.07 First public release (0.8) 2014.02.01 2014.11.06 v0.11 Cowboy Bebop CSS 改进：>>> 和 ::slotted 选择器， CSS variable theming ● 基于 Proxy 的响应式系统重构 ○ 不再需要 Vue.set 或者 this.$set ○ Lazy observation ○ 显式构建响应式对象 ● HTML Modules: 类似单文件组件的新标准（由 Google 起草中） ● 与 Web Components 的兼容

目 录 致谢 基础 安装 介绍 应用 & 组件实例 模板语法 Data Properties and Methods 计算属性和侦听器 Class 与 Style 绑定 条件渲染 列表渲染 事件处理 表单输入绑定 组件基础 深入组件 组件注册 Props 非 Prop 的 Attribute 自定义事件 插槽 提供 / 注入 动态组件 & 异步组件 构建 响应性 深入响应性原理 响应式原理 响应式计算和侦听 组合 API 介绍 Setup 生命周期钩子 提供/注入 模板引用 渲染机制和优化 Vue 2 中的更改检测警告 工具 单文件组件 测试 TypeScript 支持 Mobile 规模化 路由 状态管理 服务端渲染 无障碍 基础 语义学 标准 资源 从 Vue 2 迁移 介绍 v-for Attribute key attribute 按键修饰符 在 prop 的默认函数中访问 this 渲染函数 API Slot 统一 过渡的 class 名更改 v-model v-if 与 v-for 的优先级对比 v-bind 合并行为 贡献文档 Vue 文档编写指南 文档风格指南 翻译 - 4 - 本文档使用 书栈网 · BookStack.CN 构建 致谢 当前文档

可组合的 Vue Composable Vue, 编写可组合可复⽤的 Vue 函数的最佳实践与技巧 ANTHONY FU Hangzhou, China 2021 Anthony Fu antfu antfu7 Anthony Fu antfu.me Vue 核⼼成员 / Vite 团队成员 VueUse, Slidev, Type Challenges 等项⽬创作者 全职开源 建⽴ 输⼊ → 输出 的连结 输出会⾃动根据输⼊的改变⽽改变 ?=?²+?²=2x2+4x4=20 模式 不同于 React，Vue 的 setup() 只会在组件建⽴时执⾏⼀次，并建⽴数据与逻辑之间的连结。 ` ` ? ? ?² ?² ? EXCEL 中的公式 2 4 4 16 20 模式和技巧 编写可复⽤，可组合的逻辑 v4.11.0 v4.11.0 85k/month const foo = ref('bar') const data = reactive({ foo, id: 10 }) data.foo // 'bar' unref - Ref 的反操作 如果传⼊⼀个 Ref，返回其值 否则原样返回 ` ` 核⼼ 实现 function unref(r: Ref | T): T { return isRef(r) ?

腾讯在线教育战略产品腾讯课堂及企鹅辅导的研发， 并精心打造前端工程师Next学位，开启在线教育变革之路。 我们的工程师们也多次在Qcon、Velocity等业界大会进行分享。我们有着丰富的前端经验，也热衷于技术的开源与 分享。每年，我们都会举办自己的前端大会 ——IMWebConf。 会议日程 会议日程 大会流程： 大会流程： Node.js会场 会场 框架性能会场 框架性能会场 综合会场 综合会场 德勤担任顾问一职。于 2011 年起加入 Google，在山景总部进行 Google Offers 与 Google Wallet 的技术整合工作。目前主要负责 分享和推动 PWA 和 AMP 的前端技术，与 Web 开发者一起通过新颖的前端技术创造更快 更优的用户体验。 PWA与AMP - 移动 Web的现在与未来 Limin zhu 微软程序经理 (Program Manager II)，负责开 的Node.js：将下一代Web框 架Koa进行到底》一书的核 心内容，覆盖最新技术栈， 大局观和最佳实践 姜天意 姜天意，昵称99，阿里巴巴零售通事业部前端 技术专家 Web安全风险与Node 框架安全方案介绍 深入浅出的介绍的常见的安 全问题，一些不常见的安全 问题，以及对应的防范方 法。开发一个Node框架，需 要考虑哪些安全方面的问 题？相信你会得到一些答 案。

02 来源网站：链滴 许可协议：署名-相同方式共享 4.0 国际 (CC BY-SA 4.0) 认识Mock 学到这里就算是开始踏入AntD的门，然后我们还得学习一下常用的一些操作，例如Mock。 针对与Mock他大致就是用来模拟数据的，为什么会有它的出现呢？因为现在前后端开发基本是分离 ，但是数据结构一般都会先定好，在日常开发中，为了前端的进度不受到后端的影响，常用Mock来 虚拟数据来模拟后端发来的请求。 从上面可以看到就是简单的加了async关键字，让后加了request和response 认识Service 在上面说了Mock的一个基本使用，那他是如何工作的呢？ 前面已经说了，Mock相当于模拟服务器数据，那请求数据的地方在哪里呢？那就是Service的文件夹 ，这时候我们大致看一下Service的基础结构，方便后面的demo看懂。 import {request} from "umi"; 原文链接：Ant

具有什什么特点？为开发者 带来了了是什什么？当前社区的反馈如何？ mpvue 是什什么 使⽤用 Vue.js 开发⼩小程序的前端框架 Vue.js 代码 ⼩小程序代码 ⼯工程化体系集成 cli 命令⾏行行⼯工具 编译构建集成 ⽣生态扩展能⼒力力 npm 管理理⽀支持 Vue 组件机制 开发规范扩展 Vue 编码规范 Vue 语法⽀支持 Vue 引擎驱动 mpvue 的能⼒力力 好扩展 前端赋能 了了解⼩小程序能⼒力力 & 边界 了了解 Vue.js 特性 了了解前端构建 mpvue 做什什么 & 不不做什什么 设计⼀一种编码⽅方式 确定⼀一套语法集合 内置编译构建⼯工具 推荐示例例项⽬目模板 UI 组件库 常⽤用⼯工具库 第三⽅方平台⽀支持 H5 差异抹平和适配 mpvue only mpvue 为主 mpvue 做增量量开发 使⽤用场景 • 官⽅方标准使⽤用⽅方式 • 从零构建⼩小程序项⽬目 从零构建⼩小程序项⽬目 • quickstart 集成⽅方案 • mpvue ⽅方案为基础 • 不不同⽅方案边界隔离 • 差异化构建 + 集成 • 维持既有技术⽅方案 • 使⽤用 simple ⼯工具 • 定制构建策略略 # install vue-cli $ npm install --global vue-cli # create new project with template

前终端统⼀一⽅方案 Hippy-Vue 设计和实现 腾讯 / QQ 浏览器器 SuperTeam / xqkuang 背景介绍 Web 开发效率⾼高 ⽀支持多平台 可动态发布 体验差 能⼒力力弱 Native 开发效率低 ⽆无法跨平台 发布复杂 体验好 能⼒力力强 传统移动端开发模式，⽆无法满⾜足业务精细化运营需求，急需寻找⼀一种⾼高性能、跨平台、动态发布的开发解决⽅方案。 ⽅方案。 前终端⼀一体化 开发效率⾼高 ⽀支持双平台 可动态发布 能⼒力力强 体验好 Hippy 简介 腾讯 Hippy 动态运营解决⽅方案由 Hippy SDK 与 Hippy 管理理平台 组成： • Hippy SDK 是⼀一套多端统⼀一的开发框架，它能通过 JavaScript ⾼高效率地开发出：跨平台（安卓/iOS/ Web）、⾼高性能的原⽣生应⽤用，尤其适合需要快速迭代⼜又追求⾼高性能的产品。 采⽤用三层设计，其中： • JavaScript 层：提供业务代码运⾏行行时的前端上下⽂文环境； • Native Framework 层：负责前终端通讯与 JavaScript VM，并提供 Native 相关模块； • Portable UI 层：提供基础 UI 组件与布局计算框架，并负责渲染⾄至⽬目标平台； Layout/Style Hippy Layout Text Component Text..

，3.x 版在易用性、功能、性能上都有了很大的提升，可以说是对 ue 3 比较成熟支持的版本了。 浏览器兼容性 Element Plus 和 Ant Design Vue 3 都已不在支持 IE 了，并不是他们自己放弃了 IE 而是 Vue 3 本 已经放弃了 IE。如果想在低版本浏览器上正常使用这两个框架，可使用 Babel、ESBuild 或其他转换 原文链接：Element Plus 3 的框架之一，新版本解决了很多 Vue 用户群在旧版本 喜欢的「单向数据流 value + change event」，实现了全 v-model 使用组件。 维护状态 Element Plus 与 Element UI 一样依然是饿了么团队开发支持和维护。前段时间传闻 Element UI 无 维护，不更新了。其实只是团队在全力开发 Element Plus 而已。Element 团队的迭代速度有目共睹 Plus、Ant Design Vue 与卡拉云对比 Element Plus 与 Ant Design Vue 都是 Vue 3 的一个组件库，所以使用 Element 和 antdv 首先要搭 Vue 3 开发环境，然后再引入组件库，再按照文档的说明，根据自己的需求进行二次开发。使用 Elem nt 和 antdv 相对来说对前端技能要求较高。 卡拉云是新一代低代码开发平台，与 Element 和 antdv

Vue声明式编程 摘要 • 声明式与图灵完备性 • 声明式与UI编程的演进 • 声明式与UI架构 • 声明式与交互 声明式与图灵完备性 声明式 • 我们对语⾔言有很多划分的维度 • 声明式 vs 命令式 • 声明式语⾔言：HTML XML CSS SQL • 命令式语⾔言：C++ Java JavaScript 图灵完备性 • 图灵完备：“可计算性” • 命令式的图灵完备性：if/for， 实际上Vue的组件系统具有图灵完备性 • 使⽤用Vue计算阶乘 • 使⽤用Vue计算斐波那契数列列 声明式与UI编程 UI编程 • 70年年代 MVC诞⽣生 ⼈人们意识到视图应该被独⽴立抽象 • 80年年代 标记语⾔言⼤大热 最初更更与⽂文本相关 • 90年年代 可视化编辑器器出现 “独⽴立的UI代码⽂文件” • 2000年年后 markup language+ programming 声明式优势 • 可视化的“可逆性” • 声明式与可再绑定性 • 听说近年年某框架把html和css塞回JS了了？ 可重复绑定性 • recycle-list item item item item item item item item item item item Recycle Pool Visible Area 声明式与UI架构 MVVM • MVC => MVP