Reactivity in Vue.js ( Vue )
Reactivity in Vue.js ( Vue )
Vue.js. The Progressive JavaScript Framework
About the Book
Vue.js stands out as an innovative and efficient framework, celebrated for its declarative rendering and robust reactivity system. While declarative rendering simplifies UI state definition, Vue.js's reactivity system genuinely distinguishes it, facilitating seamless data binding and automatic UI updates.
"Reactivity in Vue.js" offers an in-depth exploration of Vue.js's reactivity system, catering to both seasoned developers and newcomers alike. This comprehensive guide takes you on a journey from reactivity novice to expert, equipping you with the skills to leverage Vue's dynamic data reactivity features effectively.
I prefer to avoid using tools unless I understand how they work under the hood. This book dives into the concepts and principles that drive reactivity, offering insight into why features behave as they do.
Through explicit examples and a simplified reactivity implementation closely resembling Vue 3 code, this book ensures a comprehensive understanding of Vue.js's reactivity system. Our simplified approach sheds light on the inner workings of Vue 3 code, saving you valuable time typically spent on trial and error.
About the Author
Table of Contents
- 1:Reactivity, a first look
- 1.1:Understanding Reactive versus Imperative programming
- 1.2:Reactivity defined: synchronizing application State with the DOM
- 1.3:Reactive examples in Vue.js
- 2:Running the examples in this book
- 2.1:Inline Vue template in HTML
- 2.2:Using an external JS file for Vue components
- 2.3:Locally with Node.js
- 2.4:SFC
- 3:Debugging Code
- 3.1:Template Inspection
- 3.2:Determining Reactivity
- 3.3:Readable JSON Debugging
- 3.4:Advanced
consolecommands
- 3.5:In-template debugging with an event listener
- 3.6:Custom formatters in the Chrome DevTools
- 3.7:StackBlitz
- 3.8:Observing reactivity
- 3.9:Visual debugging
- 3.10:Hooks for debugging reactive variables
- 3.11:Expose a reactive variable to the global scope
- 3.12:Live Expressions and the Root Component Instance
- 4:Reactivity with Composition API
- 4.1:Example showcasing
ref()andreactive()
- 4.2:Introduction to the reactivity utilities
- 4.3:Object-based reactivity with
reactive()
- 4.4:Reference-based reactivity with
ref()
- 4.5:
computed(): lazy auto-updating properties
- 4.6:
watch(): manual dependency tracking
- 4.7:
watchEffect(): automatic dependency tracking
- 4.8:
computed()versuswatch()
- 4.9:Cleanup of a watcher
- 4.10:More Utilities
- 4.1:Example showcasing
- 5:Caveats
- 5.1:Reassigning objects
- 5.2:Ways to replacing entire objects
- 5.3:Destructering and reactivity loss
- 5.4:Copying reactive references
- 5.5:Properly updating a reactive reference to maintain reactivity
- 5.6:Watching reactive objects or reactive arrays
- 5.7:Limitations with making primitives
reactive()
- 5.8:
ref()and array methods that mutate
- 5.9:Static snapshots disrupt
reactive()objects
- 5.10:Decoupling behavior
- 5.11:Retrieving the raw, original object of a Vue-created proxy.
- 5.12:Watchers and
ref(): trade-off between deep reactivity and performance
- 5.13:Vue updates the DOM automatically, but not synchronously
- 5.14:The asynchronous nature of
watchcallbacks
- 5.15:The need for getter functions
- 6:Understanding observable objects, Proxies, and Reflect
- 6.1:Observable objects in JavaScript
- 6.2:Introduction to JavaScript Proxies
- 6.3:Introduction to Reflect
- 6.4:Harmonious method naming among Reflect, Proxy, and Object
- 6.5:Crafting custom ‘dynamic’ variables with Proxy and Reflect
- 6.6:Proxies: the reactivity backbone
- 6.7:Component instance as
thiscontext
- 7:Reactive variables and effects
- 7.1:Reactive variables
- 7.2:Reactive effects
- 7.3:How are reactive variables and effects connected ?
- 7.4:Upcoming content
- 8:Peeling off a first layer: understanding
ReactiveEffect- 8.1:Inspecting a
ReactiveEffectwithin a reactive reference
- 8.2:What is
ReactiveEffect?
- 8.3:How
ReactiveEffectandProxywork together
- 8.4:The Role of the internal tool
effect
- 8.5:Takeaway
- 8.1:Inspecting a
- 9:Dependency tracking
- 9.1:Dependency tracking for reactive objects.
- 9.2:Dependency tracking for reactive references.
- 9.3:Extending our
effect()implementation
- 9.4:Nested, recursive, and interdependent effects
- 10:
shallowRefandshallowReactive- 10.1:Understanding
ref
- 10.2:Deep reactivity. Internally we cache proxies. This approach ensures deep reactivity and efficient re-use of proxies for optimal performance. ( shallowRef does nothing more than disabling that feature)
- 10.3:Understanding
shallowReactive
- 10.1:Understanding
- 11:Creating our implementation of
computed()- 11.1:First, we’ll set up a basic reactivity system.
- 11.2:Computed Properties
- 12:
ReactiveEffectpowerswatch()andwatchEffect()
- 13:Reactivity and timing
- 13.1:Vue badges updates
- 13.2:The
nextTickfunction
- 13.3:Recap of
watchEffect()andwatch()
- 13.4:Timing
- 13.5:a Timeline
- 13.6:The source code
- 13.7:Examples
- 13.8:Practical implications
- 14:The
renderfunction as an effect- 14.1:Simplified Vue component example
- 14.2:Source code insights
- 14.3:SFC Example Focusing on Reactivity
- 1:Reactivity, a first look
The Leanpub 60 Day 100% Happiness Guarantee
Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.
Now, this is technically risky for us, since you'll have the book or course files either way. But we're so confident in our products and services, and in our authors and readers, that we're happy to offer a full money back guarantee for everything we sell.
You can only find out how good something is by trying it, and because of our 100% money back guarantee there's literally no risk to do so!
So, there's no reason not to click the Add to Cart button, is there?
See full terms...
Earn $8 on a $10 Purchase, and $16 on a $20 Purchase
We pay 80% royalties on purchases of $7.99 or more, and 80% royalties minus a 50 cent flat fee on purchases between $0.99 and $7.98. You earn $8 on a $10 sale, and $16 on a $20 sale. So, if we sell 5000 non-refunded copies of your book for $20, you'll earn $80,000.
(Yes, some authors have already earned much more than that on Leanpub.)
In fact, authors have earnedover $14 millionwriting, publishing and selling on Leanpub.
Learn more about writing on Leanpub
Free Updates. DRM Free.
If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).
Most Leanpub books are available in PDF (for computers) and EPUB (for phones, tablets and Kindle). The formats that a book includes are shown at the top right corner of this page.
Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.
Learn more about Leanpub's ebook formats and where to read them
