From 53dc21c0945bfc1b56cf193763454037f5f4431a Mon Sep 17 00:00:00 2001 From: coderwhy Date: Sun, 23 May 2021 22:40:40 +0800 Subject: [PATCH 1/3] The description of `this` in setup is inconsistent with the source code --- src/guide/composition-api-introduction.md | 41 ++++++++++------------- 1 file changed, 18 insertions(+), 23 deletions(-) diff --git a/src/guide/composition-api-introduction.md b/src/guide/composition-api-introduction.md index 24be0392b9..099ba821ec 100644 --- a/src/guide/composition-api-introduction.md +++ b/src/guide/composition-api-introduction.md @@ -76,7 +76,7 @@ Now that we know the **why** we can get to the **how**. To start working with th The new `setup` component option is executed **before** the component is created, once the `props` are resolved, and serves as the entry point for composition API's. ::: warning -Because the component instance is not yet created when `setup` is executed, there is no `this` inside a `setup` option. This means, with the exception of `props`, you won't be able to access any properties declared in the component – **local state**, **computed properties** or **methods**. +Although the component instance has been created, it is not bound to `this` when the setup is executed, so `this` cannot be used in the setup, and the processing of props is also completed later, this means, with the exception of `props`, you won't be able to access any properties declared in the component – **local state**, **computed properties** or **methods**. ::: The `setup` option should be a function that accepts `props` and `context` which we will talk about [later](composition-api-setup.html#arguments). Additionally, everything that we return from `setup` will be exposed to the rest of our component (computed properties, methods, lifecycle hooks and so on) as well as to the component's template. @@ -91,14 +91,14 @@ export default { props: { user: { type: String, - required: true - } + required: true, + }, }, setup(props) { console.log(props) // { user: '' } return {} // anything returned here will be available for the rest of the component - } + }, // the "rest" of the component } ``` @@ -298,14 +298,14 @@ Whenever `counter` is modified, for example `counter.value = 5`, the watch will export default { data() { return { - counter: 0 + counter: 0, } }, watch: { counter(newValue, oldValue) { console.log('The new counter value is: ' + this.counter) - } - } + }, + }, } ``` @@ -420,7 +420,7 @@ export default function useUserRepositories(user) { return { repositories, - getUserRepositories + getUserRepositories, } } ``` @@ -435,14 +435,14 @@ import { ref, computed } from 'vue' export default function useRepositoryNameSearch(repositories) { const searchQuery = ref('') const repositoriesMatchingSearchQuery = computed(() => { - return repositories.value.filter(repository => { + return repositories.value.filter((repository) => { return repository.name.includes(searchQuery.value) }) }) return { searchQuery, - repositoriesMatchingSearchQuery + repositoriesMatchingSearchQuery, } } ``` @@ -509,24 +509,19 @@ export default { props: { user: { type: String, - required: true - } + required: true, + }, }, setup(props) { const { user } = toRefs(props) const { repositories, getUserRepositories } = useUserRepositories(user) - const { - searchQuery, - repositoriesMatchingSearchQuery - } = useRepositoryNameSearch(repositories) + const { searchQuery, repositoriesMatchingSearchQuery } = + useRepositoryNameSearch(repositories) - const { - filters, - updateFilters, - filteredRepositories - } = useRepositoryFilters(repositoriesMatchingSearchQuery) + const { filters, updateFilters, filteredRepositories } = + useRepositoryFilters(repositoriesMatchingSearchQuery) return { // Since we don’t really care about the unfiltered repositories @@ -535,9 +530,9 @@ export default { getUserRepositories, searchQuery, filters, - updateFilters + updateFilters, } - } + }, } ``` From 48261bb7018840a9e76476a89aa9659ece5f8ea1 Mon Sep 17 00:00:00 2001 From: coderwhy <1664626884@qq.com> Date: Mon, 24 May 2021 12:11:34 +0800 Subject: [PATCH 2/3] More accurate description of `this` in the setup function Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> --- src/guide/composition-api-introduction.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/composition-api-introduction.md b/src/guide/composition-api-introduction.md index 099ba821ec..3fdb2306ed 100644 --- a/src/guide/composition-api-introduction.md +++ b/src/guide/composition-api-introduction.md @@ -76,7 +76,7 @@ Now that we know the **why** we can get to the **how**. To start working with th The new `setup` component option is executed **before** the component is created, once the `props` are resolved, and serves as the entry point for composition API's. ::: warning -Although the component instance has been created, it is not bound to `this` when the setup is executed, so `this` cannot be used in the setup, and the processing of props is also completed later, this means, with the exception of `props`, you won't be able to access any properties declared in the component – **local state**, **computed properties** or **methods**. +You should avoid using `this` inside `setup` as it won't refer to the component instance. `setup` is called before `data` properties, `computed` properties or `methods` are resolved, so they won't be available within `setup`. ::: The `setup` option should be a function that accepts `props` and `context` which we will talk about [later](composition-api-setup.html#arguments). Additionally, everything that we return from `setup` will be exposed to the rest of our component (computed properties, methods, lifecycle hooks and so on) as well as to the component's template. From 80b0c86d907f6876990e0f2f422cec9766d7dcc1 Mon Sep 17 00:00:00 2001 From: coderwhy Date: Mon, 24 May 2021 12:18:06 +0800 Subject: [PATCH 3/3] fix:Removed some formatted commas --- src/guide/composition-api-introduction.md | 39 +++++++++++++---------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/src/guide/composition-api-introduction.md b/src/guide/composition-api-introduction.md index 099ba821ec..bfef22d6ac 100644 --- a/src/guide/composition-api-introduction.md +++ b/src/guide/composition-api-introduction.md @@ -91,14 +91,14 @@ export default { props: { user: { type: String, - required: true, - }, + required: true + } }, setup(props) { console.log(props) // { user: '' } return {} // anything returned here will be available for the rest of the component - }, + } // the "rest" of the component } ``` @@ -298,14 +298,14 @@ Whenever `counter` is modified, for example `counter.value = 5`, the watch will export default { data() { return { - counter: 0, + counter: 0 } }, watch: { counter(newValue, oldValue) { console.log('The new counter value is: ' + this.counter) - }, - }, + } + } } ``` @@ -420,7 +420,7 @@ export default function useUserRepositories(user) { return { repositories, - getUserRepositories, + getUserRepositories } } ``` @@ -435,14 +435,14 @@ import { ref, computed } from 'vue' export default function useRepositoryNameSearch(repositories) { const searchQuery = ref('') const repositoriesMatchingSearchQuery = computed(() => { - return repositories.value.filter((repository) => { + return repositories.value.filter(repository => { return repository.name.includes(searchQuery.value) }) }) return { searchQuery, - repositoriesMatchingSearchQuery, + repositoriesMatchingSearchQuery } } ``` @@ -509,19 +509,24 @@ export default { props: { user: { type: String, - required: true, - }, + required: true + } }, setup(props) { const { user } = toRefs(props) const { repositories, getUserRepositories } = useUserRepositories(user) - const { searchQuery, repositoriesMatchingSearchQuery } = - useRepositoryNameSearch(repositories) + const { + searchQuery, + repositoriesMatchingSearchQuery + } = useRepositoryNameSearch(repositories) - const { filters, updateFilters, filteredRepositories } = - useRepositoryFilters(repositoriesMatchingSearchQuery) + const { + filters, + updateFilters, + filteredRepositories + } = useRepositoryFilters(repositoriesMatchingSearchQuery) return { // Since we don’t really care about the unfiltered repositories @@ -530,9 +535,9 @@ export default { getUserRepositories, searchQuery, filters, - updateFilters, + updateFilters } - }, + } } ```