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

Author: NataliaTepluhina

src/.vuepress/components/community/team/members.js

@@ -299,6 +299,16 @@ const members = [
       twitter: 'KiaKing85',
       reposOfficial: ['vuex'],
       reposPersonal: ['vuex-orm/*']
+    },
+    {
+      name: 'Anthony Fu',
+      city: 'Taipei, Taiwan',
+      languages: ['zh', 'en'],
+      github: 'antfu',
+      twitter: 'antfu7',
+      reposOfficial: ['composition-api'],
+      reposPersonal: ['vueuse', 'vue-demi', 'vue-reactivity/*'],
+      links: ['https://antfu.me/']
     }
   ])
 )

src/guide/composition-api-template-refs.md

@@ -1,4 +1,4 @@
-## Template Refs
+# Template Refs
 
 > This section uses [single-file component](single-file-component.html) syntax for code examples
 
@@ -35,7 +35,7 @@ Here we are exposing `root` on the render context and binding it to the div as i
 
 Refs used as templates refs behave just like any other refs: they are reactive and can be passed into (or returned from) composition functions.
 
-### Usage with JSX
+## Usage with JSX
 
 ```js
 export default {
@@ -53,7 +53,7 @@ export default {
 }
 ```
 
-### Usage inside `v-for`
+## Usage inside `v-for`
 
 Composition API template refs do not have special handling when used inside `v-for`. Instead, use function refs to perform custom handling:
 

src/guide/custom-directive.md

@@ -209,40 +209,22 @@ app.directive('demo', (el, binding) => {
 
 ## Usage on Components
 
-In 3.0, with fragments support, components can potentially have more than one root nodes. This creates an issue when a custom directive is used on a component with multiple root nodes.
-
-To explain the details of how custom directives will work on components in 3.0, we need to first understand how custom directives are compiled in 3.0. For a directive like this:
+When used on components, custom directive will always apply to component's root node, similarly to [non-prop attributes](component-attrs.html).
 
 ```vue-html
-<div v-demo="test"></div>
-```
-
-Will roughly compile into this:
-
-```js
-const vDemo = resolveDirective('demo')
-
-return withDirectives(h('div'), [[vDemo, test]])
+<my-component v-demo="test"></my-component>
 ```
 
-Where `vDemo` will be the directive object written by the user, which contains hooks like `mounted` and `updated`.
-
-`withDirectives` returns a cloned VNode with the user hooks wrapped and injected as VNode lifecycle hooks (see [Render Function](render-function.html) for more details):
-
 ```js
-{
-  onVnodeMounted(vnode) {
-    // call vDemo.mounted(...)
-  }
-}
+app.component('my-component', {
+  template: `
+    <div> // v-demo directive will be applied here
+      <span>My component content</span>
+    </div>
+  `
+})
 ```
 
-**As a result, custom directives are fully included as part of a VNode's data. When a custom directive is used on a component, these `onVnodeXXX` hooks are passed down to the component as extraneous props and end up in `this.$attrs`.**
-
-This also means it's possible to directly hook into an element's lifecycle like this in the template, which can be handy when a custom directive is too involved:
-
-```vue-html
-<div @vnodeMounted="myHook" />
-```
+Unlike attributes, directives can't be passed to a different element with `v-bind="$attrs"`.
 
-This is consistent with the [attribute fallthrough behavior](component-attrs.html). So, the rule for custom directives on a component will be the same as other extraneous attributes: it is up to the child component to decide where and whether to apply it. When the child component uses `v-bind="$attrs"` on an inner element, it will apply any custom directives used on it as well.
+With [fragments](/guide/migration/fragments.html#overview) support, components can potentially have more than one root nodes. When applied to a multi-root component, directive will be ignored and the warning will be thrown.

src/guide/migration/introduction.md

@@ -192,3 +192,7 @@ It is recommended to use [VSCode](https://code.visualstudio.com/) with our offic
 [rpv-badge]: https://img.shields.io/npm/v/rollup-plugin-vue/next.svg
 [rpv-npm]: https://www.npmjs.com/package/rollup-plugin-vue/v/next
 [rpv-code]: https://github.com/vuejs/rollup-plugin-vue/tree/next
+
+::: info
+For additional information on Vue 3 compatibility with libraries and plugins, be sure to check out [this issue in awesome-vue](https://github.com/vuejs/awesome-vue/issues/3544).
+:::

src/guide/transitions-enterleave.md

@@ -446,7 +446,7 @@ We discuss [transitioning between components](#transitioning-between-components)
 </transition>
 ```
 
-It's actually possible to transition between any number of elements, either by using multiple `v-if`s or binding a single element to a dynamic property. For example:
+It's actually possible to transition between any number of elements, either by using `v-if`/`v-else-if`/`v-else` or binding a single element to a dynamic property. For example:
 
 <!-- TODO: rewrite example and put in codepen example -->
 
@@ -455,10 +455,10 @@ It's actually possible to transition between any number of elements, either by u
   <button v-if="docState === 'saved'" key="saved">
     Edit
   </button>
-  <button v-if="docState === 'edited'" key="edited">
+  <button v-else-if="docState === 'edited'" key="edited">
     Save
   </button>
-  <button v-if="docState === 'editing'" key="editing">
+  <button v-else-if="docState === 'editing'" key="editing">
     Cancel
   </button>
 </transition>