Skip to content

The description of this in setup is inconsistent with the source code #1063

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
May 27, 2021
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 18 additions & 23 deletions src/guide/composition-api-introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -91,14 +91,14 @@ export default {
props: {
user: {
type: String,
required: true
}
required: true,
},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you please revert all of the unrelated formatting changes?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have submitted an inappropriate modification about the comma, thank you for pointing it out

},
setup(props) {
console.log(props) // { user: '' }

return {} // anything returned here will be available for the rest of the component
}
},
// the "rest" of the component
}
```
Expand Down Expand Up @@ -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)
}
}
},
},
}
```

Expand Down Expand Up @@ -420,7 +420,7 @@ export default function useUserRepositories(user) {

return {
repositories,
getUserRepositories
getUserRepositories,
}
}
```
Expand All @@ -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,
}
}
```
Expand Down Expand Up @@ -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
Expand All @@ -535,9 +530,9 @@ export default {
getUserRepositories,
searchQuery,
filters,
updateFilters
updateFilters,
}
}
},
}
```

Expand Down