Add Composition API docs

pull/1657/head
Kamran Ahmed 2 years ago
parent ade7e961a2
commit f38099b405
  1. 11
      content/roadmaps/105-vue/content/101-advanced-topics/100-ref.md
  2. 10
      content/roadmaps/105-vue/content/101-advanced-topics/101-torefs.md
  3. 9
      content/roadmaps/105-vue/content/101-advanced-topics/102-reactive.md
  4. 8
      content/roadmaps/105-vue/content/101-advanced-topics/103-computed.md
  5. 8
      content/roadmaps/105-vue/content/101-advanced-topics/104-watch.md
  6. 7
      content/roadmaps/105-vue/content/101-advanced-topics/105-next-tick.md
  7. 12
      content/roadmaps/105-vue/content/101-advanced-topics/106-composables.md
  8. 4
      content/roadmaps/105-vue/content/101-advanced-topics/readme.md

@ -1 +1,10 @@
# Ref
# Ref
`ref()` and `reactive()` are used to track changes of its argument. When using them to initialize variables you give Vue information: “Hey, I want you to re-build or re-evaluate everything that depends on those variables every time they change”.
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/@bsalwiczek/ref-vs-reactive-in-vue-3-whats-the-right-choice-7c6f7265ce39'>Ref() vs Reactive() in Vue 3 — what’s the right choice?</BadgeLink>
<BadgeLink colorScheme='blue' badgeText='Official API Docs' href='https://vuejs.org/api/reactivity-core.html#ref'>Reactivity API — ref</BadgeLink>

@ -1 +1,9 @@
# Torefs
# toRefs
`toRefs` converts a reactive object to a plain object where each property of the resulting object is a ref pointing to the corresponding property of the original object. Each individual ref is created using `toRef()`.
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
<BadgeLink colorScheme='blue' badgeText='Offial API Docs' href='https://vuejs.org/api/reactivity-utilities.html#toref'>Reactivity API — toRefs</BadgeLink>
<BadgeLink colorScheme='red' badgeText='Watch' href='https://www.youtube.com/watch?v=sAj6tdVS2cA'>Vue 3: Reactivity Made Easy (ref, reactive, toRefs... oh my!)</BadgeLink>

@ -1 +1,8 @@
# Reactive
# reactive
`reactive` allows us to create reactive data structures. Reactive objects are [JavaScript Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) and behave just like normal objects. The difference is that Vue is able to track the property access and mutations of a reactive object.
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
<BadgeLink colorScheme='blue' badgeText='Official API' href='https://vuejs.org/api/reactivity-core.html#reactive'>Reactivity API — reactive</BadgeLink>
<BadgeLink colorScheme='blue' badgeText='Read' href='https://developers.deepgram.com/blog/2022/02/diving-into-vue-3-reactivity-api/'>Diving into Vue 3 - The Reactivity API</BadgeLink>

@ -1 +1,7 @@
# Computed
# computed
`computed` takes a getter function and returns a readonly reactive `ref` object for the returned value from the getter. It can also take an object with `get` and `set` functions to create a writable ref object.
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
<BadgeLink colorScheme='blue' badgeText='Official API Docs' href='https://vuejs.org/api/reactivity-core.html#computed'>Reactivity Core — computed</BadgeLink>

@ -1 +1,7 @@
# Watch
# watch
`watch` watches one or more reactive data sources and invokes a callback function when the sources change.
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
<BadgeLink colorScheme='blue' badgeText='Official API Docs' href='https://vuejs.org/api/reactivity-core.html#watch'>Reactivity API — watch</BadgeLink>

@ -1 +1,6 @@
# Next tick
# nextTick
`nextTick` is a utility for waiting for the next DOM update flush.
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
<BadgeLink colorScheme='blue' badgeText='Official API Docs' href='https://vuejs.org/api/general.html#nexttick'>Global API — nextTick</BadgeLink>

@ -1 +1,11 @@
# Composables
# Composables
In the context of Vue applications, a "composable" is a function that leverages Vue's Composition API to encapsulate and reuse stateful logic.
When building frontend applications, we often need to reuse logic for common tasks. For example, we may need to format dates in many places, so we extract a reusable function for that. This formatter function encapsulates stateless logic: it takes some input and immediately returns expected output. There are many libraries out there for reusing stateless logic - for example lodash and date-fns, which you may have heard of.
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuejs.org/guide/reusability/composables.html'>Vue.js Composables</BadgeLink>
<BadgeLink colorScheme='red' badgeText='Watch' href='https://www.youtube.com/watch?v=h8yveYCbFQM'>What is a Composable? (Vue 3)</BadgeLink>

@ -1 +1,3 @@
# Advanced topics
# Advanced Topics
Now that you have covered the basics, next we have the advanced topics such as Async Components, Teleports, Provide/Inject, Custom Directives, Custom Events, Plugins, Watchers, Slots and more.

Loading…
Cancel
Save