From 14851f5c857d3b3a71bd2c1f7031e7bb1ee626c1 Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Wed, 4 Nov 2020 19:11:46 +0100 Subject: [PATCH 01/10] fix: fixed custom directives migration guide --- src/guide/migration/custom-directives.md | 27 +++--------------------- 1 file changed, 3 insertions(+), 24 deletions(-) diff --git a/src/guide/migration/custom-directives.md b/src/guide/migration/custom-directives.md index 0dbec65558..7e16c55131 100644 --- a/src/guide/migration/custom-directives.md +++ b/src/guide/migration/custom-directives.md @@ -10,7 +10,6 @@ badges: Here is a quick summary of what has changed: - API has been renamed to better align with component lifecycle -- Custom directives will be controlled by child component via `v-bind="$attrs"` For more information, read on! @@ -103,26 +102,6 @@ mounted(el, binding, vnode) { } ``` -## Implementation Details - -In Vue 3, we're now supporting fragments, which allow us to return more than one DOM node per component. You can imagine how handy that is for something like a component with multiple `
  • ` elements or the children elements of a table: - -```html - -``` - -As wonderfully flexible as this is, we can potentially encounter a problem with a custom directive that could have multiple root nodes. - -As a result, custom directives are now included as part of a virtual DOM node’s data. When a custom directive is used on a component, 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: - -```html -
    -``` - -This is consistent with the attribute fallthrough behavior, so when a child component uses `v-bind="$attrs"` on an inner element, it will apply any custom directives used on it as well. +:::warning +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. +::: From 90808822eb32371d8187497f321d29bf64322f92 Mon Sep 17 00:00:00 2001 From: YuLe Date: Thu, 5 Nov 2020 02:26:09 +0800 Subject: [PATCH 02/10] Update the GitHub repo link to `vue-next` (#672) --- src/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/README.md b/src/README.md index a497bd228f..d537873e8d 100644 --- a/src/README.md +++ b/src/README.md @@ -11,7 +11,7 @@ actionButtons: - text: Get Started link: /guide/introduction - text: GitHub - link: https://github.com/vuejs/vue + link: https://github.com/vuejs/vue-next extraClass: github grey icon: fa fa-github target: _blank @@ -30,7 +30,7 @@ footer: | Copyright © 2014-2020 Evan You socialIcons: - type: GitHub - link: https://github.com/vuejs/vue + link: https://github.com/vuejs/vue-next - type: Twitter link: https://twitter.com/vuejs - type: Medium From 265b8b5caf5c4b0a7c067172827d384489dcac24 Mon Sep 17 00:00:00 2001 From: Alexander Sokolov Date: Thu, 5 Nov 2020 18:24:22 +0300 Subject: [PATCH 03/10] Update introduction.md (#673) --- src/guide/migration/introduction.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/migration/introduction.md b/src/guide/migration/introduction.md index b45407248d..01e0b65369 100644 --- a/src/guide/migration/introduction.md +++ b/src/guide/migration/introduction.md @@ -112,7 +112,7 @@ The following consists a list of breaking changes from 2.x: - [$on, $off and $once instance methods](/guide/migration/events-api.html) - [Filters](/guide/migration/filters.html) - [Inline templates attributes](/guide/migration/inline-template-attribute.html) -- [`$children` intance property](/guide/migration/children.md) +- [`$children` instance property](/guide/migration/children.md) - `$destroy` instance method. Users should no longer manually manage the lifecycle of individual Vue components. ## Supporting Libraries From 6453ae576de792eb97a6a3045cbab450ff644e8a Mon Sep 17 00:00:00 2001 From: Aris Merchant Date: Thu, 5 Nov 2020 07:24:57 -0800 Subject: [PATCH 04/10] Improve formatting of teleport.md (#674) This switches a link to using VideoLesson, which should make it look a lot better. It also fixes a small punctuation typo. --- src/guide/teleport.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/guide/teleport.md b/src/guide/teleport.md index ad94504c50..5e65865271 100644 --- a/src/guide/teleport.md +++ b/src/guide/teleport.md @@ -1,6 +1,6 @@ # Teleport -
    Learn how to use teleport with a free lesson on Vue School
    +Learn how to use teleport with a free lesson on Vue School Vue encourages us to build our UIs by encapsulating UI and related behavior into components. We can nest them inside one another to build a tree that makes up an application UI. @@ -140,4 +140,4 @@ A common use case scenario would be a reusable `` component of which ther
    ``` -You can check `` component options in the [API reference](../api/built-in-components.html#teleport) +You can check `` component options in the [API reference](../api/built-in-components.html#teleport). From 881e1337c45edcbd5ee0cbe942bb6f09195f2a37 Mon Sep 17 00:00:00 2001 From: Kid <44045911+kidonng@users.noreply.github.com> Date: Thu, 5 Nov 2020 23:25:21 +0800 Subject: [PATCH 05/10] Fix a typo (#675) --- src/guide/contributing/translations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/contributing/translations.md b/src/guide/contributing/translations.md index 844ea17014..23e4999a16 100644 --- a/src/guide/contributing/translations.md +++ b/src/guide/contributing/translations.md @@ -1,6 +1,6 @@ # Translations -Vue has spread across the globe, with the core team being in at least half a dozen different timezones. [The forum](https://forum.vuejs.org/) includes 7 languages and counting and many of our docs have [actively-maintained translations](https://github.com/vuejs?utf8=%E2%9C%93&q=vuejs.org). We'are very proud of Vue's international reach, but we can do even better. +Vue has spread across the globe, with the core team being in at least half a dozen different timezones. [The forum](https://forum.vuejs.org/) includes 7 languages and counting and many of our docs have [actively-maintained translations](https://github.com/vuejs?utf8=%E2%9C%93&q=vuejs.org). We're very proud of Vue's international reach, but we can do even better. ## Can we start translating Vue 3 docs? From 3a40518f59d4b142a08e9a5e159ac12e8f2afbe9 Mon Sep 17 00:00:00 2001 From: Timi Omoyeni Date: Sun, 8 Nov 2020 10:08:39 +0100 Subject: [PATCH 06/10] Add inject example to reactive section of docs (#677) This example might come in handy for users that are yet to read on `Computed and Watch` in the documentation so they know that the properties they're making reactive using `computed` is available under `property.value` and not `property`. --- src/guide/component-provide-inject.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/guide/component-provide-inject.md b/src/guide/component-provide-inject.md index 932e296b39..a7be5b6983 100644 --- a/src/guide/component-provide-inject.md +++ b/src/guide/component-provide-inject.md @@ -107,6 +107,13 @@ app.component('todo-list', { } } }) + +app.component('todo-list-statistics', { + inject: ['todoLength'], + created() { + console.log(`Injected property: ${this.todoLength.value}`) // > Injected property: 5 + } +}) ``` -In this, any change to `todos.length` will be reflected correctly in the components, where `todoLength` is injected. Read more about `reactive` provide/inject in the [Composition API section](composition-api-provide-inject.html#reactivity) +In this, any change to `todos.length` will be reflected correctly in the components, where `todoLength` is injected. Read more about `computed` in the [Computed and Watch section](reactivity-computed-watchers.html#computed-values) and `reactive` provide/inject in the [Composition API section](composition-api-provide-inject.html#reactivity). From 8cbc585fa06cb92b76a77da5a1162fd4c6290c47 Mon Sep 17 00:00:00 2001 From: Kushal Niroula Date: Sun, 8 Nov 2020 14:54:26 +0545 Subject: [PATCH 07/10] Fix: typo in global-api-treeshaking (#678) --- src/guide/migration/global-api-treeshaking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/migration/global-api-treeshaking.md b/src/guide/migration/global-api-treeshaking.md index c802436115..d730cf71e6 100644 --- a/src/guide/migration/global-api-treeshaking.md +++ b/src/guide/migration/global-api-treeshaking.md @@ -36,7 +36,7 @@ test('an async feature', async () => { `Vue.nextTick()` is a global API exposed directly on a single Vue object – in fact, the instance method `$nextTick()` is just a handy wrapper around `Vue.nextTick()` with the callback’s `this` context automatically bound to the current instance for convenience. -But what if you’ve never had to deal with manual DOM manipulation, nor are you using or testing async components in our app? Or, what if, for whatever reason, you prefer to use the good old `window.setTimeout()` instead? In such a case, the code for `nextTick()` will become dead code – that is, code that’s written but never used. And dead code is hardly a good thing, especially in our client-side context where every kilobyte matters. +But what if you’ve never had to deal with manual DOM manipulation, nor are you using or testing async components in your app? Or, what if, for whatever reason, you prefer to use the good old `window.setTimeout()` instead? In such a case, the code for `nextTick()` will become dead code – that is, code that’s written but never used. And dead code is hardly a good thing, especially in our client-side context where every kilobyte matters. Module bundlers like [webpack](https://webpack.js.org/) support [tree-shaking](https://webpack.js.org/guides/tree-shaking/), which is a fancy term for “dead code elimination.” Unfortunately, due to how the code is written in previous Vue versions, global APIs like `Vue.nextTick()` are not tree-shakeable and will be included in the final bundle regardless of where they are actually used or not. From 4c0ff767bee3aeeb49e3a164110523ec8b469cd6 Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Sun, 8 Nov 2020 09:10:15 +0000 Subject: [PATCH 08/10] fix: increase header depth and tweak wording in transitions-overview.md (#679) --- src/guide/transitions-overview.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/guide/transitions-overview.md b/src/guide/transitions-overview.md index 01589844be..7532eafa2d 100644 --- a/src/guide/transitions-overview.md +++ b/src/guide/transitions-overview.md @@ -72,9 +72,9 @@ Vue.createApp(Demo).mount('#demo') -# Transitions with Style Bindings +## Transitions with Style Bindings -Some transition affects can be applied by interpolating values, for instance by binding a style to an element while an interaction occurs. Take this example for instance: +Some transition effects can be applied by interpolating values, for instance by binding a style to an element while an interaction occurs. Take this example for instance: ```html
    @@ -152,7 +152,7 @@ You may also find that entrances look better with slightly more time than an exi ## Easing -Easing is an important way to convey depth in an animation. One of the most common mistakes newcomers to animation have is to use `ease-in` for entrances, and `ease-out` for exits. You'll actually need the opposite. +Easing is an important way to convey depth in an animation. One of the most common mistakes newcomers to animation make is to use `ease-in` for entrances, and `ease-out` for exits. You'll actually need the opposite. If we were to apply these states to a transition, it would look something like this: From af5b09f64ee44d9bb8131a06c4170dc88f9c963b Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Sun, 8 Nov 2020 09:10:42 +0000 Subject: [PATCH 09/10] fix: add two migration pages to the sidebar index (#680) --- src/.vuepress/config.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index f8b7500da9..2dff70928c 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -126,6 +126,7 @@ const sidebar = { '/guide/migration/async-components', '/guide/migration/attribute-coercion', '/guide/migration/attrs-includes-class-style', + '/guide/migration/children', '/guide/migration/custom-directives', '/guide/migration/custom-elements-interop', '/guide/migration/data-option', @@ -148,7 +149,8 @@ const sidebar = { '/guide/migration/v-on-native-modifier-removed', '/guide/migration/v-model', '/guide/migration/v-if-v-for', - '/guide/migration/v-bind' + '/guide/migration/v-bind', + '/guide/migration/watch' ] }, { From dbeed5b73a88d8c8852a52626e9e431fe47ea991 Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Sun, 8 Nov 2020 09:19:41 +0000 Subject: [PATCH 10/10] fix: correct two examples of using h with components and slots (#681) --- src/guide/render-function.md | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/guide/render-function.md b/src/guide/render-function.md index 8ae78f26ab..72223123ea 100644 --- a/src/guide/render-function.md +++ b/src/guide/render-function.md @@ -370,11 +370,15 @@ To pass slots to a child component using render functions: render() { // `
    {{ props.text }}
    ` return Vue.h('div', [ - Vue.h('child', {}, { + Vue.h( + Vue.resolveComponent('child'), + {}, // pass `slots` as the children object // in the form of { name: props => VNode | Array } - default: (props) => Vue.h('span', props.text) - }) + { + default: (props) => Vue.h('span', props.text) + } + ) ]) } ``` @@ -389,7 +393,9 @@ Vue.h( { level: 1 }, - [Vue.h('span', 'Hello'), ' world!'] + { + default: () => [Vue.h('span', 'Hello'), ' world!'] + } ) ```