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' ] }, { 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 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). 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? 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. +::: 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. 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 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!'] + } ) ``` 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). 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: