From 14851f5c857d3b3a71bd2c1f7031e7bb1ee626c1 Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Wed, 4 Nov 2020 19:11:46 +0100 Subject: [PATCH 01/17] 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/17] 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/17] 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/17] 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/17] 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/17] 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/17] 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/17] 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/17] 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/17] 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!'] + } ) ``` From a2f811f6321a2fd3cacd5629c3136f7162586972 Mon Sep 17 00:00:00 2001 From: Zihao Yang Date: Tue, 10 Nov 2020 16:14:02 +0800 Subject: [PATCH 11/17] docs: update component-slots.md (#685) * docs: update component-slots.md * doc: update component-slots.md --- src/guide/component-slots.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/guide/component-slots.md b/src/guide/component-slots.md index c30c218021..85e8c35fea 100644 --- a/src/guide/component-slots.md +++ b/src/guide/component-slots.md @@ -308,10 +308,9 @@ Note that the abbreviated syntax for default slot **cannot** be mixed with named ```html - - - {{ slotProps.item }} - + + {{ slotProps.item }} + From a37a85c7d136e9f5e3468e57e33d5e145cd925b2 Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Wed, 11 Nov 2020 12:44:41 +0000 Subject: [PATCH 12/17] fix: revise the migration guide for $children, especially the example (#688) --- src/guide/migration/children.md | 30 ++++++++++++++++-------------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/src/guide/migration/children.md b/src/guide/migration/children.md index 3736a092c7..087a6ee969 100644 --- a/src/guide/migration/children.md +++ b/src/guide/migration/children.md @@ -7,32 +7,34 @@ badges: ## Overview -`$children` instance property removed from Vue 3.0 and no longer supported. +The `$children` instance property has been removed from Vue 3.0 and is no longer supported. ## 2.x Syntax In 2.x, developers could access direct child components of the current instance with `this.$children`: -```html -
    - Vue logo - Change logo -
    -``` +```vue + + + ``` ## 3.x Update -In 3.x, `$children` property is removed and no longer supported. Instead, if you need to access a child component instance, we recommend using [$refs](/guide/component-template-refs.html#template-refs). +In 3.x, the `$children` property is removed and no longer supported. Instead, if you need to access a child component instance, we recommend using [$refs](/guide/component-template-refs.html#template-refs). From 8b9ab516dd903f04d4966c39cd7bf39c1f1ba87a Mon Sep 17 00:00:00 2001 From: Noel De Martin Date: Wed, 11 Nov 2020 13:45:53 +0100 Subject: [PATCH 13/17] Restore search page (#682) * Restore search page * Update search page --- src/.vuepress/components/search/index.vue | 258 ++++++++++++++++++++++ src/.vuepress/config.js | 1 + src/search/README.md | 3 + 3 files changed, 262 insertions(+) create mode 100644 src/.vuepress/components/search/index.vue create mode 100644 src/search/README.md diff --git a/src/.vuepress/components/search/index.vue b/src/.vuepress/components/search/index.vue new file mode 100644 index 0000000000..170154c488 --- /dev/null +++ b/src/.vuepress/components/search/index.vue @@ -0,0 +1,258 @@ + + + + + diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index 2dff70928c..a28b461933 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -405,6 +405,7 @@ module.exports = { smoothScroll: false, algolia: { indexName: 'vuejs-v3', + appId: 'BH4D9OD16A', apiKey: 'bc6e8acb44ed4179c30d0a45d6140d3f' } }, diff --git a/src/search/README.md b/src/search/README.md new file mode 100644 index 0000000000..b785ff9fb5 --- /dev/null +++ b/src/search/README.md @@ -0,0 +1,3 @@ +# Search Vue.js + + From d5fb5aef0bfe0af30d0372a66e7c3da7ba10b120 Mon Sep 17 00:00:00 2001 From: Isaac Levy Date: Wed, 11 Nov 2020 07:46:30 -0500 Subject: [PATCH 14/17] update jsdelivr link (#684) point to current vue release --- src/guide/installation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/installation.md b/src/guide/installation.md index e940d3ab66..282241dd23 100644 --- a/src/guide/installation.md +++ b/src/guide/installation.md @@ -93,7 +93,7 @@ $ yarn dev ## Explanation of Different Builds -In the [`dist/` directory of the npm package](https://cdn.jsdelivr.net/npm/vue@3.0.0-rc.1/dist/) you will find many different builds of Vue.js. Here is an overview of which `dist` file should be used depending on the use-case. +In the [`dist/` directory of the npm package](https://cdn.jsdelivr.net/npm/vue@3.0.2/dist/) you will find many different builds of Vue.js. Here is an overview of which `dist` file should be used depending on the use-case. ### From CDN or without a Bundler From 008ec9ad0c50474175f2d6d7ae00b418f0bce23f Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Wed, 11 Nov 2020 12:47:32 +0000 Subject: [PATCH 15/17] fix: minor revisions to the migration guide for custom directives (#689) --- src/guide/migration/custom-directives.md | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/src/guide/migration/custom-directives.md b/src/guide/migration/custom-directives.md index 7e16c55131..eaf3e53704 100644 --- a/src/guide/migration/custom-directives.md +++ b/src/guide/migration/custom-directives.md @@ -7,11 +7,7 @@ badges: ## Overview -Here is a quick summary of what has changed: - -- API has been renamed to better align with component lifecycle - -For more information, read on! +The hook functions for directives have been renamed to better align with the component lifecycle. ## 2.x Syntax @@ -45,10 +41,10 @@ In Vue 3, however, we’ve created a more cohesive API for custom directives. As - bind → **beforeMount** - inserted → **mounted** -- **beforeUpdate**: new! this is called before the element itself is updated, much like the component lifecycle hooks. +- **beforeUpdate**: new! This is called before the element itself is updated, much like the component lifecycle hooks. - update → removed! There were too many similarities to updated, so this is redundant. Please use updated instead. - componentUpdated → **updated** -- **beforeUnmount**: new! similar to component lifecycle hooks, this will be called right before an element is unmounted. +- **beforeUnmount**: new! Similar to component lifecycle hooks, this will be called right before an element is unmounted. - unbind -> **unmounted** The final API is as follows: @@ -57,7 +53,7 @@ The final API is as follows: const MyDirective = { beforeMount(el, binding, vnode, prevVnode) {}, mounted() {}, - beforeUpdate() {}, + beforeUpdate() {}, // new updated() {}, beforeUnmount() {}, // new unmounted() {} @@ -103,5 +99,5 @@ mounted(el, binding, vnode) { ``` :::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. +With [fragments](/guide/migration/fragments.html#overview) support, components can potentially have more than one root node. When applied to a multi-root component, a directive will be ignored and a warning will be logged. ::: From ea8aa4c049573664843c6be57dbb4a4f98f0eca9 Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Wed, 11 Nov 2020 12:48:47 +0000 Subject: [PATCH 16/17] fix: revise the migration guide for the emits option (#690) --- src/guide/migration/emits-option.md | 32 ++++++++++++++--------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/guide/migration/emits-option.md b/src/guide/migration/emits-option.md index 968a0f41f7..35b40aea09 100644 --- a/src/guide/migration/emits-option.md +++ b/src/guide/migration/emits-option.md @@ -8,13 +8,13 @@ badges: ## Overview -Vue 3 now offers an `emits` option similar to the existing `props` option. This option can be used to define the events that a component can emit to its parent. +Vue 3 now offers an `emits` option, similar to the existing `props` option. This option can be used to define the events that a component can emit to its parent. ## 2.x Behavior -In Vue 2, you can define the props that a component received, but you can't declare which events it can emit: +In Vue 2, you can define the props that a component receives, but you can't declare which events it can emit: -```html +```vue