VueConf.US 大会第二天会议内容概述

看新闻很累？看技术新闻更累？试试下载 InfoQ 手机客户端，每天上下班路上听新闻，有趣还有料！

第一届 VueConf.US 大会于 3 月 26 日到 28 日在新奥尔良市举行，VueJS 核心团队和来自世界各地的数百名 Vue 开发者齐聚一堂。大会包括一天的研讨会，全部由 VueJS 核心团队成员讲授，接下来两天是演讲。InfoQ 之前已经发表了 3 月 27 日上午的会议概述、下午的会议概述以及对Vue Mastery 创始人Gregg Pollack 的采访。

本文是3 月28 日的会议概述。演讲内容涵盖高级Vue 模型、使用Vue 设计系统、TypeScript 与Vue 搭配使用、Vue 与React 比较、使用Vue 进行服务器端渲染、Vue Storybook 以及使用Vue 单文件组件快速搭建原型。

Vue 顾问不想让你知道的 7 个秘密模式

Chris Fritz 是 Vue 顾问兼核心团队成员。他以关于“改进开发人员编写 Vue 代码的七个模式”的演讲开启了这一天的会议。这七个模式可以分成三类：“生产力提升”、“重大调整”和“让不可能成为可能”。

其中一项直接提升生产力的特性是把对象传给“观察器（watcher）”，让你可以把它们配置成在页面加载时立即运行，消除了观察器和 mounted 钩子之间常见的重复模式。

watch: { 
 searchText: { 
   handler: 'fetchUserList', 
   immediate: true, 
 }, 
} 
 

其他提升生产力的特性包括自动化组件和模块注册。重大调整包括可以延迟加载的 routs、构建透明封装组件等。最后，在“让不可能成为可能”类别下，Fritz 提出了功能强大的工具，如使用函数组件构建 multi-root 组件，使用返回 null 的渲染函数渲染像“地图层（map layer）”这样的非 HTML 元素

Vue 中灵活的设计系统

第二位演讲者是 Miriam Suzanne 。她是一名 Web 顾问、编辑，同时也是 Suzy 网格系统的创建者。她谈了设计系统以及如何让它们成为开发过程的一部分。把设计的概念从开发中独立出来，Suzanne 指出：

设计系统总是设计和代码的统一。从来不是二选一。那不仅是如何使用字母“m”，而且是如何构建“m”依赖的符号？

和为 API 创建文档类似，Suzanne 主张创建设计指南作为交流和分享设计模式的方法：

如果你的应用程序包含了模式，而你没有告诉人们那些模式的存在，那么两个小时后那些模式就不存在了。

为了防止设计指南过期，她重点强调了把设计指南生成加入工具的重要性，样式表中每有新内容都会自动添加到设计指南。

Vue 和 TypeScript：启动与运行

微软项目经理 Daniel Rosenwasser 介绍了在 JavaScript 开发中使用 TypeScript 的价值，并专门介绍了 Vue。Rosenwasser 说：

类型系统不仅能告诉你不应该做什么，而且也可能推测出你想做要什么。

接下来，Rosenwaser 介绍了他们为在 Vue 中引入类型所做的工作，他指出，由于涉及到元编程层面，所以这非常有挑战性。TypeScript 和 Vue 团队协同工作，通过多次发布对 TypeScript 和 Vue 同时做了多处修改，但是，现在，只要使用 vue-cli 预先设置并向计算属性添加类型之后，就可以搭配使用 TypeScript 和 Vue 了。

把类型迁移到已有的项目更有挑战性，但是团队正在编写指南让这个过程变得更容易。要了解更多信息，可以查看 Vue TypeScript 支持文档。

Vue 的 React 视角

下一位演讲者是 Divya Sasidharan ，她是 Lucro Global LLC 的一名 Web 开发人员。Sasidharan 探讨了她在从 React 切换到 Vue 时发现的理念差异：

在 Vue 中，我们编写代码的方式是声明式的，有一个清晰的关注点分离，而在 React 和 JSX 中，代码阅读起来就困难一些，因为逻辑就在标记中。

在整个演讲过程中，Sasidharan 都在介绍 React 中的方法，并把它们和 Vue 进行比较，逐个强调 Vue 的声明式方法。她在演讲结束时甚至还展示了如何将无法自然纳入这种模式的功能，如使用了单个画布元素的 Web 地图，使用返回 null 但是把层应用到共享画布的渲染函数来创建一种类似 Vue 的声明式方法。

Vue 和 SSR：最佳实践

在又一系列的闪电演讲后， Nuxt.js 作者 Sebastien Chopin 开启了下午的会议。Chopin 强调，“服务器端渲染”一词有点不得要领——Web 应用程序从一开始就是在服务器渲染的——但是，这个全新的功能是真得在服务器和客户端之间共享代码，并在服务器端渲染的内容之上把一个单页应用程序在客户端透明地“水化（hydration）”。

Chopin 强调了这种方法的好处，他称之为“Universal JavaScript”，如更简单的 SEO 和社交分享实现、比单页应用程序更快的初始加载时间。同时，通过在渲染后水化一个单页应用程序，Universal JavaScript 应用仍然具有 SPA 所具有的好处，如完全客户端控制、更快的页面转换、更低的数据需求等等。

在剩余部分的演讲中，Chopin 给观众展示了一系列的例子，说明利用 Vue 的服务器端渲染能力创建 Universal Javascript 应用程序所需要做出的选择和采取的步骤。接下来，他展示了 Nuxt.js 框架如何让采用所有这些最佳实践和使用vue init nuxt-community/starter-template安装一个起始模板一样简单。

Vue Storybook 简介

按照日程安排，接下来是由 SalesLoft 的 Peter Finn 介绍 Vue Storybook。Storybook 是一个 UI 开发环境，供开发人员构建组件，本质上讲，这是一个交互式设计指南。这个库最初是因为 React 流行起来的，但 Finn 重点介绍了如何开发出 Vue 版本，让它可以很容易地用于 Vue.js。

他在演讲中逐个介绍了 Storybook 的特性，展示它如何促成了独立的 UI 测试和 UI 组件编辑。接下来，Finn 转而介绍了组织在使用 Storybook 时可以做的部分修改，并提出了把“UI 驱动开发”作为测试驱动开发或其他过程的替代选项的可能性。

使用 Vue 单文件组件构建原型

最后演讲的是来自微软 VS Code 团队的 Pine Wu 。从 Twitter 的评论看，他的演讲是此次大会最受欢迎的演讲之一，他提到了一个新的、正在开发中的原型工具 Proun。

Proun 的名字源于一种艺术风格，按照 Wu 的说法，是“介于艺术和架构之间的中间状态”。这是一个集成在 VS Code 中的编辑器内原型工具。该工具现在还没有公开提供，但 Wu 展示了它如何实现 Vue 单文件组件极其快速的迭代，让开发人员可以修改他们的代码，并立即看到变化，而不必在编辑器、浏览器和开发工具之间切来切去。这个简单高效的过程赢得了热烈的掌声。Wu 说：

我使用的这个工具从根本上改变了我的思维方式。我非常喜欢的一个理念是，让工具帮助你更轻松地构建东西，因为这些工具，你开始构建更简洁的东西。

查看英文原文： Session from Day 2 of VueConf.US