Weekly Vue News - #60 - Lifecycle hooks for debugging
Hi 👋
I'm still busy improving CodeSnap and waiting for the verification process of my payment provider. Then I will start a small marketing campaign with discounts for the Pro plan.
Have a great week ☀️
Vue Tip: Lifecycle hooks for debugging
Vue provides two lifecycle hooks that we can use for debugging purposes: "onRenderTracked" and "onRenderTriggered".
These hooks are development-mode-only and not called during server-side rendering.
onRenderTracked
Registers a debug hook to be called when a reactive dependency has been tracked by the component's render effect:
Image created with CodeSnap.dev
onRenderTriggered
Registers a debug hook to be called when a reactive dependency triggers the component's render effect to be re-run:
Image created with CodeSnap.dev
Curated Vue Content
👉🏻 This article takes a look at the basics of performance optimization for Vue apps and guides you towards resources and tools that help you go deeper.
📕 Migrate Components Written in Vue 2 Options API To Vue 3 Composition API
👉🏻 If you’re going to migrate your app/s to Vue3, or just trying the new syntax of Vue3 the upcoming topic will help you kickstart with a lot of confidence.
👉🏻 "A Clean Component does not hold you back from being productive over the long term."
JavaScript Tip: Create a range of numbers
Image created with CodeSnap.dev
Curated Web Development Content
📕 Why the number input is the worst input
👉🏻 Think that web form has got your number?
👉🏻 If you used input type=“number”, you may be surprised to find that it doesn't.
📕 A Proposed JS Feature: Extractor Objects
👉🏻 Entering stage one at the latest TC39 meeting is a proposal for being able to define your own logic (such as data validation or transformation) to run as part of the object destructuring process.
📕 Best practices for creating a modern npm package
👉🏻 A step-by-step “as of 2022” walkthrough of creating your own npm package using current best practices.
👉🏻 It’s very thorough and certainly worth revisiting, even if you’ve built a package already.
👉🏻 A command-line tool to generate your GitHub activity graph.
👉🏻 Does your profile look like you have stopped coding at all?
👉🏻 No worries, this script will help you.
👉🏻 An animation library for high-fidelity motion graphics that can be used visually or programmatically.
Quote of the Week
