Merge branch 'master' of github.com:vuejs/docs-next

Author: NataliaTepluhina

assets/diagrams.sketch

@@ -0,0 +1,74 @@
+<script>
+const validBadges = ['new', 'breaking', 'removed', 'updated']
+
+export default {
+  props: {
+    badges: {
+      type: Array,
+      default: () => [],
+      validator(value) {
+        return validBadges.includes(value)
+      }
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="migration-badge-wrapper">
+    <span
+      v-for="badgeType in badges"
+      :class="`migration-badge is-${badgeType}`"
+      :key="`badge-type-${badgeType}`"
+    >
+      {{ badgeType }}
+    </span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.migration-badge {
+  background-color: #ccc;
+  font-size: 0.8rem;
+  border: 2px solid #ccc;
+  border-radius: 5px;
+  margin-right: 0.5rem;
+  margin-top: 0.5rem;
+  color: #222;
+  padding: 0.25rem 0.25rem;
+  font-weight: bold;
+
+  &:first-child {
+    margin-left: 1rem;
+  }
+
+  &.is-new {
+    background-color: #228740;
+    border-color: #228740;
+    color: #fff;
+  }
+
+  &.is-breaking {
+    background-color: #b00000;
+    border-color: #b00000;
+    color: #fff;
+  }
+
+  &.is-removed {
+    background-color: #cf8700;
+    border-color: #cf8700;
+    color: #fff;
+  }
+
+  &.is-updated {
+    background-color: #fcff44;
+    border-color: #fcff44;
+    color: #222;
+  }
+}
+
+.migration-badge-wrapper {
+  display: flex;
+  margin-top: -0.5rem;
+}
+</style>

src/.vuepress/components/MigrationBadges.vue

@@ -28,7 +28,8 @@
           <OutboundLink />
         </a>
 
-        <RouterLink v-else :to="next.path">{{ next.title || next.path }}</RouterLink>→
+        <RouterLink v-else :to="next.path">{{ next.title || next.path }}</RouterLink>
+        →
       </span>
     </p>
   </div>

src/.vuepress/public/images/lifecycle.png

@@ -128,6 +128,7 @@ h1, h2, h3, h4, h5, h6
 
     &:first-child
       display flex
+      flex-wrap wrap
       align-items center
       margin-top -1.5rem
       margin-bottom 1rem

src/.vuepress/theme/components/PageNav.vue

@@ -102,7 +102,7 @@ const MyComponent = {
 
 These lifecycle hook registration functions can only be used synchronously during [`setup()`](#setup), since they rely on internal global state to locate the current active instance (the component instance whose `setup()` is being called right now). Calling them without a current active instance will result in an error.
 
-The component instance context is also set during the synchronous execution of lifecycle hooks, so watchers and computed properties created inside synchronously inside lifecycle hooks are also automatically tore down when the component unmounts.
+The component instance context is also set during the synchronous execution of lifecycle hooks. As a result, watchers and computed properties created synchronously inside of lifecycle hooks are also automatically tore down when the component unmounts.
 
 - **Mapping between Options API Lifecycle Options and Composition API**
 

src/.vuepress/theme/styles/index.styl

@@ -143,4 +143,4 @@ An object of DOM elements and component instances, registered with [`ref` attrib
 Contains parent-scope attribute bindings and events that are not recognized (and extracted) as component [props](./options-data.html#props) or [custom events](./options-data.html#emits). When a component doesn't have any declared props or custom events, this essentially contains all parent-scope bindings, and can be passed down to an inner component via `v-bind="$attrs"` - useful when creating higher-order components.
 
 - **See also:**
-  - [Non-Prop Attributes](../guide/component-props.html#non-prop-attributes)
+  - [Non-Prop Attributes](../guide/component-attrs.html)

src/api/composition-api.md

@@ -427,7 +427,7 @@ See [this sandbox](https://codepen.io/team/Vue/pen/oNXaoKy) to experiment with t
 
 Keep in mind that this attribute can be used with regular HTML elements, however they will be treated as components, which means all attributes **will be bound as DOM attributes**. For some properties such as `value` to work as you would expect, you will need to bind them using the [`.prop` modifier](../api/directives.html#v-bind).
 
-That's all you need to know about dynamic components for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Dynamic & Async Components](./components-dynamic-async.html).
+That's all you need to know about dynamic components for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Dynamic & Async Components](./component-dynamic-async.html).
 
 ## DOM Template Parsing Caveats
 

src/api/instance-properties.md

@@ -366,7 +366,7 @@ You can even define fallbacks, to be used in case a slot prop is undefined:
 ```html
 <todo-list v-slot="{ item = 'Placeholder' }">
   <i class="fas fa-check"></i>
-  <span class="green">{{ todo }}<span>
+  <span class="green">{{ item }}<span>
 </todo-list>
 ```
 

src/guide/component-basics.md

@@ -220,7 +220,7 @@ To explain the details of how custom directives will work on components in 3.0,
 Will roughly compile into this:
 
 ```js
-const vFoo = resolveDirective('demo')
+const vDemo = resolveDirective('demo')
 
 return withDirectives(h('div'), [[vDemo, test]])
 ```

src/guide/component-slots.md

@@ -2,7 +2,7 @@
 
 ## Release Notes
 
-Latest beta version: 3.0.0-rc.1
+Latest beta version: 3.0.0-rc.5
 
 Detailed release notes for each version are available on [GitHub](https://github.com/vuejs/vue-next/releases).
 

src/guide/custom-directive.md

@@ -1,4 +1,9 @@
-# Async Components
+---
+badges:
+  - new
+---
+
+# Async Components <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 

src/guide/installation.md

@@ -1,4 +1,9 @@
-# Attribute Coercion Behavior
+---
+badges:
+  - breaking
+---
+
+# Attribute Coercion Behavior <MigrationBadges :badges="$frontmatter.badges" />
 
 ::: info Info
 This is a low-level internal API change and does not affect most developers.
@@ -27,7 +32,7 @@ In 2.x, we had the following strategies for coercing `v-bind` values:
 
 The following table describes how Vue coerce "enumerated attributes" differently with normal non-boolean attributes:
 
-| Binding expression       | `foo` <sup>normal</sup> | `draggable` <sup>enumerated</sup> |
+| Binding expression  | `foo` <sup>normal</sup> | `draggable` <sup>enumerated</sup> |
 | ------------------- | ----------------------- | --------------------------------- |
 | `:attr="null"`      | /                       | `draggable="false"`               |
 | `:attr="undefined"` | /                       | /                                 |
@@ -53,7 +58,7 @@ For non-boolean attributes, Vue will stop removing them if they are `false` and
 
 The following table describes the new behavior:
 
-| Binding expression       | `foo` <sup>normal</sup>    | `draggable` <sup>enumerated</sup> |
+| Binding expression  | `foo` <sup>normal</sup>    | `draggable` <sup>enumerated</sup> |
 | ------------------- | -------------------------- | --------------------------------- |
 | `:attr="null"`      | /                          | / <sup>†</sup>                    |
 | `:attr="undefined"` | /                          | /                                 |

src/guide/migration/async-components.md

@@ -1,4 +1,9 @@
-# Custom Directives
+---
+badges:
+  - breaking
+---
+
+# Custom Directives <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 

src/guide/migration/attribute-coercion.md

@@ -1,9 +1,9 @@
 ---
-types:
+badges:
   - breaking
 ---
 
-# Custom Elements Interop changes <span v-for="type in $frontmatter.types" class="badge" :key="`type-${type}`">{{ type }}</span>
+# Custom Elements Interop changes <MigrationBadges :badges="$frontmatter.badges" />
 
 # Overview
 

src/guide/migration/custom-directives.md

@@ -1,9 +1,10 @@
 ---
-types:
+title: Data Option
+badges:
   - breaking
 ---
 
-# Data Option <span v-for="type in $frontmatter.types" class="badge" :key="`type-${type}`">{{ type }}</span>
+# {{ $frontmatter.title }} <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 

src/guide/migration/custom-elements-interop.md

@@ -1,10 +1,9 @@
 ---
-types:
-  - removed
+badges:
   - breaking
 ---
 
-# Events API <span v-for="type in $frontmatter.types" class="badge" :key="`type-${type}`">{{ type }}</span>
+# Events API <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 

src/guide/migration/data-option.md

@@ -1,10 +1,9 @@
 ---
-types:
+badges:
   - removed
-  - breaking
 ---
 
-# Filters <span v-for="type in $frontmatter.types" class="badge" :key="`type-${type}`">{{ type }}</span>
+# Filters <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 

src/guide/migration/events-api.md

@@ -1,4 +1,9 @@
-# Fragments
+---
+badges:
+  - new
+---
+
+# Fragments <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 

src/guide/migration/filters.md

@@ -1,13 +1,18 @@
-# Functional Components
+---
+badges:
+  - breaking
+---
+
+# Functional Components <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 
 In terms of what has changed, at a high level:
 
 - Performance gains from 2.x for functional components are now negligible in 3.x, so we recommend just using stateful components
 - 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
+- **BREAKING:** `functional` attribute on single-file component (SFC) `<template>` is removed
+- **BREAKING:** `{ functional: true }` option in components created by functions is removed
 
 For more information, read on!
 

src/guide/migration/fragments.md

@@ -1,4 +1,9 @@
-# Global API Treeshaking
+---
+badges:
+  - breaking
+---
+
+# Global API Treeshaking <MigrationBadges :badges="$frontmatter.badges" />
 
 ## 2.x Syntax
 
@@ -96,11 +101,7 @@ is compiled into something similar to the following:
 import { h, Transition, withDirectives, vShow } from 'vue'
 
 export function render() {
-  return h(Transition, [
-    withDirectives(h('div', 'hello'), [
-      [vShow, this.ok]
-    ])
-  ])
+  return h(Transition, [withDirectives(h('div', 'hello'), [[vShow, this.ok]])])
 }
 ```
 

src/guide/migration/functional-components.md

@@ -1,4 +1,9 @@
-# Global API
+---
+badges:
+  - breaking
+---
+
+# Global API <MigrationBadges :badges="$frontmatter.badges" />
 
 Vue 2.x has a number of global APIs and configurations that globally mutate Vue’s behavior. For instance, to create a global component, you would use the `Vue.component` API like this:
 
@@ -23,18 +28,18 @@ While this approach is convenient, it leads to a couple of problems. Technically
 
 - Global configuration makes it easy to accidentally pollute other test cases during testing. Users need to carefully store original global configuration and restore it after each test (e.g. resetting `Vue.config.errorHandler`). Some APIs like `Vue.use` and `Vue.mixin` don't even have a way to revert their effects. This makes tests involving plugins particularly tricky. In fact, vue-test-utils has to implement a special API `createLocalVue` to deal with this:
 
-  ```js
-  import { createLocalVue, mount } from '@vue/test-utils'
+```js
+import { createLocalVue, mount } from '@vue/test-utils'
 
-  // create an extended `Vue` constructor
-  const localVue = createLocalVue()
+// create an extended `Vue` constructor
+const localVue = createLocalVue()
 
-  // install a plugin “globally” on the “local” Vue constructor
-  localVue.use(MyPlugin)
+// install a plugin “globally” on the “local” Vue constructor
+localVue.use(MyPlugin)
 
-  // pass the `localVue` to the mount options
-  mount(Component, { localVue })
-  ```
+// pass the `localVue` to the mount options
+mount(Component, { localVue })
+```
 
 - Global configuration makes it difficult to share the same copy of Vue between multiple "apps" on the same page, but with different global configurations.
 

src/guide/migration/global-api-treeshaking.md

@@ -1,10 +1,9 @@
 ---
-types:
+badges:
   - breaking
-  - removal
 ---
 
-# Inline Template Attribute
+# Inline Template Attribute <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 
@@ -68,7 +67,7 @@ A component previously using `inline-template` can also be refactored using the
 </my-comp>
 ```
 
-The child, instead of providing no template, should now render the default slot*:
+The child, instead of providing no template, should now render the default slot\*:
 
 ```html
 <!--
@@ -80,4 +79,4 @@ The child, instead of providing no template, should now render the default slot*
 </template>
 ```
 
-> * Note: In 3.x, slots can be rendered as the root with native [fragments](/guide/migration/fragments) support!
+> - Note: In 3.x, slots can be rendered as the root with native [fragments](/guide/migration/fragments) support!

src/guide/migration/global-api.md

@@ -39,6 +39,7 @@ The following consists a list of breaking changes from 2.x:
   - `v-enter` -> `v-enter-from`
   - `v-leave` -> `v-leave-from`
 - [Component watch option](/api/options-data.html#watch) and [instance method `$watch`](/api/instance-methods.html#watch) no longer supports dot-delimited string paths, use a computed function as the parameter instead
+- In Vue 2.x, application root container's `outerHTML` is replaced with root component template (or eventually compiled to a template, if root component has no template/render option). Vue 3.x now uses application container's `innerHTML` instead.
 
 ### Removed
 

src/guide/migration/inline-template-attribute.md

@@ -1,4 +1,9 @@
-# KeyCode Modifiers
+---
+badges:
+  - breaking
+---
+
+# KeyCode Modifiers <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 

src/guide/migration/introduction.md

@@ -1,4 +1,9 @@
-# Render Function API
+---
+badges:
+  - breaking
+---
+
+# Render Function API <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview