Reactivity in Vue.js
Reactivity in Vue.js
Learn the basics and explore the core.
About the Book
Vue.js is renowned for its declarative rendering, allowing developers to define the desired UI state with clarity. At the heart of this capability lies Vue's reactivity system, which ensures that any changes in data are automatically reflected in the user interface.
This book delves into the mechanics of Vue's reactivity system, offering insights into how Vue tracks data changes and updates the DOM seamlessly.
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 your 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:Effect Functions: The backbone of reactivity
- 4.6:
computed(): Lazy Auto-Updating Properties
- 4.7:
computed(): lazy auto-updating properties
- 4.8:
watch(): manual dependency tracking
- 4.9:
watchEffect(): automatic dependency tracking
- 4.10:
computed()versuswatch()
- 4.11:Cleanup of a watcher
- 4.12:More Utilities
- 4.1:Example showcasing
- 5:Different watchers in
@vue/reactivityand@vue/runtime-core- 5.1:What each module provides
- 5.2:Understanding
watch()andwatchEffect()
- 5.3:Understanding
computed()in@vue/reactivity
- 5.4:Takeway
- 5.5:References
- 6:Watching Javascript Reference Types
- 6.1:Watching in Objects Wrapped with
reactive()
- 6.2:Watching in objects wrapped
ref()
- 6.3:Watching arrays wrapped in
reactive()
- 6.4:Watching arrays wrapped in
ref()
- 6.1:Watching in Objects Wrapped with
- 7:Caveats
- 7.1:Reassigning objects
- 7.2:Destructering and reactivity loss
- 7.3:Copying reactive references
- 7.4:Always update reactive data through the appropriate references
- 7.5:
watch()andref(): trade-off between deep reactivity and performance
- 7.6:Observing reactive objects and arrays with the
watchfunction
- 7.7:Limitations with making primitives
reactive()
- 7.8:Pulling a value from a
reactive()objects
- 7.9:Retrieving the raw, original object of a
reactive()proxy.
- 7.10:The assumed advantage of
ref(reactive(...))
- 7.11:Vue updates the DOM automatically, but not synchronously
- 7.12:The asynchronous nature of
watchcallbacks
- 7.13:Non reactive sources and computed properties.
- 7.14:The need for getter functions
- 8:Understanding Proxies and Reflect
- 8.1:Observable objects in JavaScript
- 8.2:Introduction to JavaScript Proxies
- 8.3:Introduction to Reflect
- 8.4:Harmonious method naming among Reflect, Proxy, and Object
- 8.5:Crafting custom ‘dynamic’ variables with Proxy and Reflect
- 8.6:Proxies: the reactivity backbone
- 8.7:Component instance as
thiscontext
- 9:Reactive variables versus effects
- 9.1:Reactive variables
- 9.2:Reactive effects
- 9.3:How are reactive variables and effects connected ?
- 9.4:Upcoming content
- 10:Peeling off a first layer: understanding
ReactiveEffect- 10.1:Why do we need
ReactiveEffect?
- 10.2:Inspecting a
ReactiveEffectwithin a reactive reference
- 10.3:The internal structure of
ReactiveEffect
- 10.4:How Vue tracks dependencies with
ReactiveEffect
- 10.5:The Role of the Internal Tool
effect()
- 10.6:Takeaway
- 10.1:Why do we need
- 11:Dependency tracking
- 11.1:Dependency tracking for reactive objects
- 11.2:Dependency tracking for reactive references.
- 11.3:Scope management
- 11.4:Scope management
- 11.5:
reactive()vsref(): Both are, butwatch()behaves differently
- 11.6:Extending our custom reactive effect implementation
- 11.7:References
- 12:Nested, recursive, and interdependent Effects
- 12.1:Concepts
- 12.2:Cleanup and invalidating effects
- 12.3:Immediate re-entrance (self-triggering)
- 12.4:Nested effects and indirect re-entrance
- 13:Comparing
@vue/reactivityvs.vue/runtime-core- 13.1:Introduction**
- 13.2:
@vue/reactivityworks without a job queue**
- 13.3:
vue/runtime-coreUses a job queue to batch updates**
- 13.4:
watchandwatchEffectin@vue/reactivity**
- 13.5:Key differences:
@vue/reactivityvs.vue/runtime-core**
- 13.6:Takeaway
- 14:Implementing basic shallow reactive variables
- 14.1:Understanding
shallowReactive()andreactive()
- 14.2:Key difference in how they work
- 14.3:🔍 How
shallowReactive()works internally
- 14.4:Enhanced implementation using
MutableReactiveHandler
- 14.5:shallow reactivity with
shallowRef()
- 14.6:Takeaway
- 14.7:Complete example
- 14.1:Understanding
- 15:Implementing a basic
computed()function- 15.1:First, we’ll set up a basic reactivity system.
- 15.2:Computed Properties
- 15.3:verbeterde versie:
- 16:Reactivity and timing
- 16.1:Vue badges updates
- 16.2:The
nextTickfunction
- 16.3:Recap of
watchEffect()andwatch()
- 16.4:Timing
- 16.5:a Timeline
- 16.6:The source code
- 16.7:Examples
- 16.8:Practical implications
- 17:The
renderfunction as an effect- 17.1:Simplified Vue component example
- 17.2:Source code insights
- 17.3:SFC example focusing on reactivity
- 18:Components
- 18.1:Reactivity and Components: understanding props
- 18.2:Composables
- 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
