From bee59bff1ef172ec04104352217af06a943a0afe Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Thu, 9 Jul 2020 08:22:15 -0400
Subject: [PATCH 1/3] docs (#136): include attribute fallthrough updates

---
 src/guide/migration/functional-components.md | 46 +++++++++++++++++---
 1 file changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/guide/migration/functional-components.md b/src/guide/migration/functional-components.md
index 31b2bd8086..e48270a3ac 100644
--- a/src/guide/migration/functional-components.md
+++ b/src/guide/migration/functional-components.md
@@ -5,14 +5,15 @@
 In terms of what has changed, at a high level:
 
 - Performance gains from v2 for functional components are now negligible in v3, so we recommend just using stateful components
-- `functional` attribute on single-file component `<template>` is deprecated
 - Functional components can only be created using a plain function that receives `props` and `context` (i.e., `slots`, `attrs`, `emit`)
+- **DEPRECATED:** `functional` attribute on single-file component (SFC) `<template>` is deprecated
+- **DEPRECATED:** `{ functional: true }` option in components created by functions is deprecated
 
-For a more in-depth explanation, read on!
+For more information, read on!
 
 ## Introduction
 
-In Vue 2, functional components had primary use cases:
+In Vue 2, functional components had two primary use cases:
 
 - as a performance optimization, because they initialized much faster than stateful components
 - to return multiple root nodes
@@ -53,12 +54,19 @@ export default {
   props: ['level']
 }
 </script>
-
 ```
 
 ## Current Syntax
 
-Now in Vue 3, the only way to create a functional component is with a plain function that receives `props` and a `context` object that contains `attrs`, `slots`, and `emit` options:
+### Components Created by Functions
+
+Now in Vue 3, all functional components are created with a plain function. In other words, no need to define the `{ functional: true }` option.
+
+They will receive two arguments: `props` and `context`. The `context` argument is an object that contains a component's `attrs`, `slots`, and `emit` properties.
+
+In addition, rather than implicitly provide provide `h` in a `render` function, `h` is now a imported globally.
+
+Using the previously mentioned example of a `<dynamic-heading>` component, here is how it looks now.
 
 ```js
 import { h } from 'vue'
@@ -72,6 +80,34 @@ DynamicHeading.props = ['level']
 export default GreetingMessage
 ```
 
+### Single File Components (SFCs)
+
+In v3, the performance difference between stateful and functional components has been drastically reduced and will be insignificant in most use cases. As a result, the migration path for developers using `functional` on SFCs is to remove the attribute. No additional work required.
+
+Using our `<dynamic-heading>` example from before, here is how it would look now.
+
+```js{1}
+<template>
+  <component
+    v-bind:is="`h${props.level}`"
+    v-bind="$attrs"
+  />
+</template>
+
+<script>
+export default {
+  props: ['level']
+}
+</script>
+```
+
+The main differences are that:
+
+1. `functional` attribute removed on `<template>`
+1. `listeners` are now passed as part of `$attrs` and can be removed
+
+## Next Steps
+
 For more information on the usage of the new functional components and the changes to render functions in general, see:
 
 - [Migration: Render Functions](TODO)

From deee04f6dc09241fc9d5d3514e3684f5086be81e Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Thu, 9 Jul 2020 10:30:13 -0400
Subject: [PATCH 2/3] docs: improve clarity of statement

Co-authored-by: Natalia Tepluhina <tarya.se@gmail.com>
---
 src/guide/migration/functional-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/migration/functional-components.md b/src/guide/migration/functional-components.md
index e48270a3ac..d180f81266 100644
--- a/src/guide/migration/functional-components.md
+++ b/src/guide/migration/functional-components.md
@@ -60,7 +60,7 @@ export default {
 
 ### Components Created by Functions
 
-Now in Vue 3, all functional components are created with a plain function. In other words, no need to define the `{ functional: true }` option.
+Now in Vue 3, all functional components are created with a plain function. In other words, there is no need to define the `{ functional: true }` component option.
 
 They will receive two arguments: `props` and `context`. The `context` argument is an object that contains a component's `attrs`, `slots`, and `emit` properties.
 

From 9dd6bff3f26dc25b10a5fd19d42e4e31e4bf013a Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Thu, 9 Jul 2020 10:30:29 -0400
Subject: [PATCH 3/3] docs: remove extraneous word

Co-authored-by: Natalia Tepluhina <tarya.se@gmail.com>
---
 src/guide/migration/functional-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/migration/functional-components.md b/src/guide/migration/functional-components.md
index d180f81266..0da35ca96f 100644
--- a/src/guide/migration/functional-components.md
+++ b/src/guide/migration/functional-components.md
@@ -64,7 +64,7 @@ Now in Vue 3, all functional components are created with a plain function. In ot
 
 They will receive two arguments: `props` and `context`. The `context` argument is an object that contains a component's `attrs`, `slots`, and `emit` properties.
 
-In addition, rather than implicitly provide provide `h` in a `render` function, `h` is now a imported globally.
+In addition, rather than implicitly provide provide `h` in a `render` function, `h` is now imported globally.
 
 Using the previously mentioned example of a `<dynamic-heading>` component, here is how it looks now.