From 0e5b6786d613eaa931f96310e6f5c48a2974a9cd Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Wed, 4 Nov 2020 06:01:53 +0000 Subject: [PATCH 1/2] fix: update links to point at the Vuex 4 documentation (#671) --- src/.vuepress/config.js | 2 +- src/guide/state-management.md | 4 ++-- src/style-guide/README.md | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index 7ced648e80..f8b7500da9 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -344,7 +344,7 @@ module.exports = { }, { text: 'Vuex', - link: 'https://vuex.vuejs.org/' + link: 'https://next.vuex.vuejs.org/' }, { text: 'Vue CLI', diff --git a/src/guide/state-management.md b/src/guide/state-management.md index 569c92d305..0525003cbc 100644 --- a/src/guide/state-management.md +++ b/src/guide/state-management.md @@ -2,7 +2,7 @@ ## Official Flux-Like Implementation -Large applications can often grow in complexity, due to multiple pieces of state scattered across many components and the interactions between them. To solve this problem, Vue offers [vuex](https://github.com/vuejs/vuex), our own Elm-inspired state management library. It even integrates into [vue-devtools](https://github.com/vuejs/vue-devtools), providing zero-setup access to [time travel debugging](https://raw.githubusercontent.com/vuejs/vue-devtools/master/media/demo.gif). +Large applications can often grow in complexity, due to multiple pieces of state scattered across many components and the interactions between them. To solve this problem, Vue offers [Vuex](https://next.vuex.vuejs.org/), our own Elm-inspired state management library. It even integrates into [vue-devtools](https://github.com/vuejs/vue-devtools), providing zero-setup access to [time travel debugging](https://raw.githubusercontent.com/vuejs/vue-devtools/master/media/demo.gif). ### Information for React Developers @@ -118,4 +118,4 @@ You should never replace the original state object in your actions - the compone As we continue developing the convention, where components are never allowed to directly mutate state that belongs to a store but should instead dispatch events that notify the store to perform actions, we eventually arrive at the [Flux](https://facebook.github.io/flux/) architecture. The benefit of this convention is we can record all state mutations happening to the store and implement advanced debugging helpers such as mutation logs, snapshots, and history re-rolls / time travel. -This brings us full circle back to [Vuex](https://github.com/vuejs/vuex), so if you've read this far it's probably time to try it out! +This brings us full circle back to [Vuex](https://next.vuex.vuejs.org/), so if you've read this far it's probably time to try it out! diff --git a/src/style-guide/README.md b/src/style-guide/README.md index bd2ab20c01..e21534aaca 100644 --- a/src/style-guide/README.md +++ b/src/style-guide/README.md @@ -1615,7 +1615,7 @@ app.component('TodoItem', { ### Non-flux state management use with caution -**[Vuex](https://github.com/vuejs/vuex) should be preferred for global state management, instead of `this.$root` or a global event bus.** +**[Vuex](https://next.vuex.vuejs.org/) should be preferred for global state management, instead of `this.$root` or a global event bus.** Managing state on `this.$root` and/or using a global event bus can be convenient for very simple cases, but it is not appropriate for most applications. From 43a00376dade91412095f6cc73cda0271053402b Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Wed, 4 Nov 2020 08:09:53 +0200 Subject: [PATCH 2/2] Document removal of $children API on Migration guide (#670) * feat: added children to migration guide * feat: added link to migration introduction --- src/guide/migration/children.md | 38 +++++++++++++++++++++++++++++ src/guide/migration/introduction.md | 3 ++- 2 files changed, 40 insertions(+), 1 deletion(-) create mode 100644 src/guide/migration/children.md diff --git a/src/guide/migration/children.md b/src/guide/migration/children.md new file mode 100644 index 0000000000..3736a092c7 --- /dev/null +++ b/src/guide/migration/children.md @@ -0,0 +1,38 @@ +--- +badges: + - removed +--- + +# $children + +## Overview + +`$children` instance property removed from Vue 3.0 and 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 +
+``` + +```js +export default { + name: "App", + components: { + MyButton, + }, + mounted() { + console.log(this.$children); // [VueComponent] + }, +}; + +``` + +## 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). diff --git a/src/guide/migration/introduction.md b/src/guide/migration/introduction.md index b510910234..b45407248d 100644 --- a/src/guide/migration/introduction.md +++ b/src/guide/migration/introduction.md @@ -109,9 +109,10 @@ The following consists a list of breaking changes from 2.x: ### Removed APIs - [`keyCode` support as `v-on` modifiers](/guide/migration/keycode-modifiers.html) -- [$on, $off and \$once instance methods](/guide/migration/events-api.html) +- [$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) - `$destroy` instance method. Users should no longer manually manage the lifecycle of individual Vue components. ## Supporting Libraries