| It's been a long day, and you're stuck. You try throwing in another `nextTick` to see if it fixes the problem. While Vue 3's reactivity system is really good, it still has those rough edges that can be hard to figure out, especially if you don't understand the deep tools Vue gives you. You probably have questions that you've (mostly successfully) ignored: - Why do composables always have to be "top-level"?
- When do I use these different watcher "flush" modes?
- Is there a better way to debug reactivity other than throwing in console.logs and stepping through line by line?
And then there are the things that Vue can do that you didn't even know about (because you don't read the docs beginning to end for fun like I do): - Creating temporary and long running effect scopes (and what even is an effect scope?!?)
- Custom refs that give you complete control over how changes are tracked and triggered
- Control over which parts of an object are reactive or not — which can help you with tricky performance issues
A few months ago, I didn't know any of these things. So I set out to learn these things and more, to fully round out my understanding of Vue's reactivity system. Then, I put together 22 hands-on exercises and recorded a bunch of videos so that you can learn these things too: The result is my new course, Advanced Reactivity. Go here to check out Advanced Reactivity Because it's a brand new course, it's on sale for 35% off until Thursday. Each of the 22 lessons contains: - An exercise with the problem and solution (in a private GitHub repo you'll get access to)
- A video where I explain the exercise, then give my solution along with an explanation of how things work and why I'm doing it the way I am
- Written content that matches the video in case you prefer to read
I've also included subtitle translations in 10 different languages (AI translated so I can easily add your language as well), and an AI-based tutor that uses the AI built-in to your code editor (eg. Cursor). Here are some of the things you'll learn: - Understand Effect Scopes: Discover the fundamental building blocks of Vue's reactivity system that you're already using to automatically manage and clean up reactive effects.
- Use Reactivity Outside of Vue: Unlock the power of Vue's reactivity system in plain JavaScript, opening up new possibilities for reactive programming in any environment.
- Create Long-Running Effect Scopes: Build shared state systems that persist across multiple components while avoiding memory leaks and broken reactivity.
- Master Advanced Watchers: Control watcher timing with post-flush and sync options, plus learn to pause, resume, and stop watchers dynamically.
- Debug Reactivity Issues: Use Vue's built-in debugging tools with `onTrack` and `onTrigger` hooks to diagnose tracking issues and troubleshoot reactive effects.
- Build Custom Refs: Create specialized reactive references with complete control over tracking and triggering behavior for custom reactivity patterns.
- Optimize Performance: Learn to temporarily or permanently opt out of reactivity using `toRaw` and `markRaw` to prevent unnecessary reactive overhead.
- Create Writable Computed Refs: Build custom two-way data binding solutions and even recreate Vue's `defineModel` from scratch.
If you'd like to check it out, here's the link again: Check out Advanced Reactivity Have a fantastic day! — Michael | 
评论
发表评论