From f38099b405792c8eb42bc9c468b1d04f394389d7 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Tue, 9 Aug 2022 22:32:24 +0400 Subject: [PATCH] Add Composition API docs --- .../105-vue/content/101-advanced-topics/100-ref.md | 11 ++++++++++- .../content/101-advanced-topics/101-torefs.md | 10 +++++++++- .../content/101-advanced-topics/102-reactive.md | 9 ++++++++- .../content/101-advanced-topics/103-computed.md | 8 +++++++- .../105-vue/content/101-advanced-topics/104-watch.md | 8 +++++++- .../content/101-advanced-topics/105-next-tick.md | 7 ++++++- .../content/101-advanced-topics/106-composables.md | 12 +++++++++++- .../105-vue/content/101-advanced-topics/readme.md | 4 +++- 8 files changed, 61 insertions(+), 8 deletions(-) diff --git a/content/roadmaps/105-vue/content/101-advanced-topics/100-ref.md b/content/roadmaps/105-vue/content/101-advanced-topics/100-ref.md index 30ad23a7a..a2cc9bca6 100644 --- a/content/roadmaps/105-vue/content/101-advanced-topics/100-ref.md +++ b/content/roadmaps/105-vue/content/101-advanced-topics/100-ref.md @@ -1 +1,10 @@ -# Ref \ No newline at end of file +# 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”. + +Free Content +Ref() vs Reactive() in Vue 3 — what’s the right choice? +Reactivity API — ref + + + diff --git a/content/roadmaps/105-vue/content/101-advanced-topics/101-torefs.md b/content/roadmaps/105-vue/content/101-advanced-topics/101-torefs.md index 48eb54788..b00bf31b1 100644 --- a/content/roadmaps/105-vue/content/101-advanced-topics/101-torefs.md +++ b/content/roadmaps/105-vue/content/101-advanced-topics/101-torefs.md @@ -1 +1,9 @@ -# Torefs \ No newline at end of file +# 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()`. + +Free Content +Reactivity API — toRefs +Vue 3: Reactivity Made Easy (ref, reactive, toRefs... oh my!) + + diff --git a/content/roadmaps/105-vue/content/101-advanced-topics/102-reactive.md b/content/roadmaps/105-vue/content/101-advanced-topics/102-reactive.md index 6fd032610..82d9b4cc9 100644 --- a/content/roadmaps/105-vue/content/101-advanced-topics/102-reactive.md +++ b/content/roadmaps/105-vue/content/101-advanced-topics/102-reactive.md @@ -1 +1,8 @@ -# Reactive \ No newline at end of file +# 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. + +Free Content +Reactivity API — reactive +Diving into Vue 3 - The Reactivity API + diff --git a/content/roadmaps/105-vue/content/101-advanced-topics/103-computed.md b/content/roadmaps/105-vue/content/101-advanced-topics/103-computed.md index 31f984a90..e5ca91f4c 100644 --- a/content/roadmaps/105-vue/content/101-advanced-topics/103-computed.md +++ b/content/roadmaps/105-vue/content/101-advanced-topics/103-computed.md @@ -1 +1,7 @@ -# Computed \ No newline at end of file +# 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. + +Free Content +Reactivity Core — computed + diff --git a/content/roadmaps/105-vue/content/101-advanced-topics/104-watch.md b/content/roadmaps/105-vue/content/101-advanced-topics/104-watch.md index dd6fc067f..d2fb9c893 100644 --- a/content/roadmaps/105-vue/content/101-advanced-topics/104-watch.md +++ b/content/roadmaps/105-vue/content/101-advanced-topics/104-watch.md @@ -1 +1,7 @@ -# Watch \ No newline at end of file +# watch + +`watch` watches one or more reactive data sources and invokes a callback function when the sources change. + +Free Content +Reactivity API — watch + diff --git a/content/roadmaps/105-vue/content/101-advanced-topics/105-next-tick.md b/content/roadmaps/105-vue/content/101-advanced-topics/105-next-tick.md index 1dc70e7e9..63307ec9c 100644 --- a/content/roadmaps/105-vue/content/101-advanced-topics/105-next-tick.md +++ b/content/roadmaps/105-vue/content/101-advanced-topics/105-next-tick.md @@ -1 +1,6 @@ -# Next tick \ No newline at end of file +# nextTick + +`nextTick` is a utility for waiting for the next DOM update flush. + +Free Content +Global API — nextTick diff --git a/content/roadmaps/105-vue/content/101-advanced-topics/106-composables.md b/content/roadmaps/105-vue/content/101-advanced-topics/106-composables.md index 553e13941..818e88c5e 100644 --- a/content/roadmaps/105-vue/content/101-advanced-topics/106-composables.md +++ b/content/roadmaps/105-vue/content/101-advanced-topics/106-composables.md @@ -1 +1,11 @@ -# Composables \ No newline at end of file +# 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. + +Free Content +Vue.js Composables + +What is a Composable? (Vue 3) + diff --git a/content/roadmaps/105-vue/content/101-advanced-topics/readme.md b/content/roadmaps/105-vue/content/101-advanced-topics/readme.md index d1a09c94a..53e96801f 100644 --- a/content/roadmaps/105-vue/content/101-advanced-topics/readme.md +++ b/content/roadmaps/105-vue/content/101-advanced-topics/readme.md @@ -1 +1,3 @@ -# Advanced topics \ No newline at end of file +# 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.