VueJS

Understanding Vue's Reactive Data

Nov 22, 2023

7 min read

Introduction

Web development has always been about creating dynamic experiences. One of the biggest challenges developers face is managing how data changes over time and reflecting these changes in the UI promptly and accurately. This is where Vue.js, one of the most popular JavaScript frameworks, excels with its powerful reactive data system.

In this article, we dig into the heart of Vue's reactivity system. We unravel how it perfectly syncs your application UI with the underlying data state, allowing for a seamless user experience. Whether new to Vue or looking to deepen your understanding, this guide will provide a clear and concise overview of Vue's reactivity, empowering you to build more efficient and responsive Vue 3 applications. So, let’s kick off and embark on this journey to decode Vue's reactive data system.

What is Vue's Reactive Data?

What does it mean for data to be ”'reactive”? In essence, when data is reactive, it means that every time the data changes, all parts of the UI that rely on this data automatically update to reflect these changes. This ensures that the user is always looking at the most current state of the application.

At its core, Vue's Reactive Data is like a superpower for your application data. Think of it like a mirror - whatever changes you make in your data, the user interface (UI) reflects these changes instantly, like a mirror reflecting your image. This automatic update feature is what we refer to as “reactivity”.

To visualize this concept, let's use an example of a simple Vue application displaying a message on the screen:

import { createApp, reactive } from 'vue';

const app = createApp({
  setup() {
    const state = reactive({
      message: 'Hello Vue!'
    });

    return {
      state
    };
  }
});

app.mount('#app');

In this application, 'message' is a piece of data that says 'Hello Vue!'. Let's say you change this message to 'Goodbye Vue!' later in your code, like when a button is clicked.

state.message = 'Goodbye Vue!';

With Vue's reactivity, when you change your data, the UI automatically updates to 'Goodbye Vue!' instead of 'Hello Vue!'. You don't have to write extra code to make this update happen - Vue's Reactive Data system takes care of it.

How does it work?

Let's keep the mirror example going. Vue's Reactive Data is the mirror that reflects your data changes in the UI. But how does this mirror know when and what to reflect? That's where Vue's underlying mechanism comes into play.

Vue has a behind-the-scenes mechanism that helps it stay alerted to any changes in your data. When you create a reactive data object, Vue doesn't just leave it as it is. Instead, it sends this data object through a transformation process and wraps it up in a Proxy.

Proxy objects are powerful and can detect when a property is changed, updated, or deleted.

Let's use our previous example:

import { createApp, reactive } from 'vue';

const app = createApp({
  setup() {
    const state = reactive({
      message: 'Hello Vue!'
    });

    return {
      state
    };
  }
});

app.mount('#app');

Consider our “message” data as a book in a library. Vue places this book (our data) within a special book cover (the Proxy). This book cover is unique - it's embedded with a tracking device that notifies Vue every time someone reads the book (accesses the data) or annotates a page (changes the data).

In our example, the reactive function creates a Proxy object that wraps around our state object.

When you change the 'message':

state.message = 'Goodbye Vue!';

The Proxy notices this (like a built-in alarm going off) and alerts Vue that something has changed. Vue then updates the UI to reflect this change.

Let’s look deeper into what Vue is doing for us and how it transforms our object into a Proxy object. You don't have to worry about creating or managing the Proxy; Vue handles everything.

const state = reactive({
  message: 'Hello Vue!'
});

// What vue is doing behind the scenes:
function reactive(obj) {
  return new Proxy(obj, {
    // target = state and key = message
    get(target, key) {
      track(target, key)
      return target[key]
    },
    set(target, key, value) {
      target[key] = value
      // Here Vue will trigger its reactivity system to update the DOM.
      trigger(target, key)
    }
  })
}

In the example above, we encapsulate our object, in this case, “state”, converting it into a Proxy object. Note that within the second argument of the Proxy, we have two methods: a getter and a setter.

The getter method is straightforward: it merely returns the value, which in this instance is “state.message” equating to 'Hello Vue!'

Meanwhile, the setter method comes into play when a new value is assigned, as in the case of “state.message = ‘Hey young padawan!’”. Here, “value” becomes our new 'Hey young padawan!', prompting the property to update. This action, in turn, triggers the reactivity system, which subsequently updates the DOM.

Venturing Further into the Depths

If you have been paying attention to our examples above, you might have noticed that inside the Proxy method, we call the functions track and trigger to run our reactivity. Let’s try to understand a bit more about them. You see, Vue 3 reactivity data is more about Proxy objects. Let’s create a new example:

<script setup>
import { reactive, watch, computed, effect } from "vue";

const state = reactive({
  showSword: false,
  message: "Hey young padawn!",
});

function changeMessage() {
  state.message = "It's dangerous to go alone! Take this.";
}

effect(() => {
  if (state.message === "It's dangerous to go alone! Take this.") {
    state.showSword = true;
  }
});

</script>

<template>
  <p>
    {{ state.message }}
  </p>
  <p v-if="state.showSword">
    <img src="./assets/sword.png" alt="sword" />
  </p>

  <button @click="changeMessage">Click!</button>
</template>

In this example, when you click on the button, the message's value changes. This change triggers the effect function to run, as it's actively listening for any changes in its dependencies.

How does the effect property know when to be called?

Vue 3 has three main functions to run our reactivity: effect, track, and trigger.

The effect function is like our supervisor. It steps in and takes action when our data changes – similar to our effect method, we will dive in more later.

Next, we have the track function. It notes down all the important data we need to keep an eye on. In our case, this data would be state.message.

Lastly, we've got the trigger function. This one is like our alarm bell. It alerts the effect function whenever our important data (the stuff track is keeping an eye on) changes.

In this way, trigger, track, and effect work together to keep our Vue application reacting smoothly to changes in data.

Let’s go back to them:

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
	// target = state & key = message
      track(target, key) // keep an eye for this 
      return target[key]
    },
    set(target, key, value) {
      target[key] = value
      trigger(target, key) // trigger the effects!
    }
  })
}

Tracking (Dependency Collection)

Tracking is the process of registering dependencies between reactive objects and the effects that depend on them. When a reactive property is read, it's "tracked" as a dependency of the current running effect.

When we execute track(), we essentially store our effects in a Set object. But what exactly is an "effect"? If we revisit our previous example, we see that the effect method must be run whenever any property changes. This action — running the effect method in response to property changes — is what we refer to as an "Effect"! (computed property, watcher, etc.)

Note: We'll outline a basic, high-level overview of what might happen under the hood. Please note that the actual implementation is more complex and optimized, but this should give you an idea of how it works.

Let’s see how it works! In our example, we have the following reactive object:

const state = reactive({
  showSword: false,
  message: "Hey young padawn!",
});

// which is transformed under the hood to:
function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
	// target = state | key = message
      track(target, key) // keep an eye for this 
      return target[key]
    },
    set(target, key, value) {
      target[key] = value
      trigger(target, key) // trigger the effects!
    }
  })
}

We need a way to reference the reactive object with its effects. For that, we use a WeakMap. Which type is going to look something like this:

WeakMap<target, Map<key, Set<effect>>>

We are using a WeakMap to set our object state as the target (or key). In the Vue code, they call this object targetMap.

Within this targetMap object, our value is an object named depMap of Map type. Here, the keys represent our properties (in our case, that would be message and showSword), and the values correspond to their effects – remember, they are stored in a Set that in Vue 3 we refer to as dep.

Huh… It might seem a bit complex, right? Let's make it more straightforward with a visual example:

With the above explained, let’s see what this Track method kind of looks like and how it uses this targetMap. This method essentially is doing something like this:

let activeEffect; // we will see more of this later

function track(target, key) {
  if (activeEffect) {
    // `depsMap` maps targets to their keys and dependent effects
    let depsMap = targetMap.get(target);
    // If we don't have a depsMap for this target in our `targetMap`, create one.
    if (!depsMap) {
      depsMap = new Map();
      targetMap.set(target, depsMap);
    }

    let dep = depsMap.get(key);
    if (!dep) {
      // If we don't have a set of effects for this key in our `depsMap`, create one.
      dep = new Set();
      depsMap.set(key, dep);
    }

    // Add the current effect as a dependency
    dep.add(activeEffect);
  }
}

At this point, you have to be wondering, how does Vue 3 know what activeEffect should run?

Vue 3 keeps track of the currently running effect by using a global variable. When an effect is executed, Vue temporarily stores a reference to it in this global variable, allowing the track function to access the currently running effect and associate it with the accessed reactive property. This global variable is called inside Vue as activeEffect.

Vue 3 knows which effect is assigned to this global variable by wrapping the effects functions in a method that invokes the effect whenever a dependency changes. And yes, you guessed, that method is our effect method.

effect(() => {
  if (state.message === "It's dangerous to go alone! Take this.") {
    state.showSword = true;
  }
});

This method behind the scenes is doing something similar to this:

function effect(update) { //the function we are passing in
  const effectMethod = () => {
    // Assign the effect as our `activeEffect`
    activeEffect = effectMethod
    // Runs the actual method, also triggering the `get` trap inside our proxy
    update();
    // Clean the activeEffect after our Effect has finished
    activeEffect = null
  }
  effectMethod()
}

The handling of activeEffect within Vue's reactivity system is a dance of careful timing, scoping, and context preservation. Let’s go step by step on how this is working all together. When we run our Effect method for the first time, we call the get trap of the Proxy.

function effect(update) 
  const effectMethod = () => {
   // Storing our active effect
    activeEffect = effectMethod
   // Running the effect
    update()
    ...
  }
 ...
}

effect(() => {
  // we call the the `get` trap when getting our `state.message`
  if (state.message === "It's dangerous to go alone! Take this.") {
    state.showSword = true;
  }
});

When running the get trap, we have our activeEffect so we can store it as a dependency.

function reactive(obj) {
  return new Proxy(obj, {
// Gets called when our effect runs
    get(target, key) {

      track(target, key) // Saves the effect
      return target[key]
    },
    // ... (other handlers)
  })
}

function track(target, key) {
  if (activeEffect) {
    //... rest of the code

    // Add the current effect as a dependency
    dep.add(activeEffect);
  }
}

This coordination ensures that when a reactive property is accessed within an effect, the track function knows which effect is responsible for that access.

Trigger Method

Our last method makes this Reactive system to be complete. The trigger method looks up the dependencies for the given target and key and re-runs all dependent effects.

function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return; // no dependencies, no effects, no need to do anything

  const dep = depsMap.get(key);
  if (!dep) return; // no dependencies for this key, no need to do anything

  // all dependent effects to be re-run
  dep.forEach(effect => {
    effect()
  });
}

Conclusion

Diving into Vue 3's reactivity system has been like unlocking a hidden superpower in my web development toolkit, and honestly, I've had a blast learning about it. From the rudimentary elements of reactive data and instantaneous UI updates to the intricate details involving Proxies, track and trigger functions, and effects, Vue 3's reactivity is an impressively robust framework for building dynamic and responsive applications.

In our journey through Vue 3's reactivity, we've uncovered how this framework ensures real-time and precise updates to the UI. We've delved into the use of Proxies to intercept and monitor variable changes and dissected the roles of track and trigger functions, along with the 'effect' method, in facilitating seamless UI updates. Along the way, we've also discovered how Vue ingeniously manages data dependencies through sophisticated data structures like WeakMaps and Sets, offering us a glimpse into its efficient approach to change detection and UI rendering.

Whether you're just starting with Vue 3 or an experienced developer looking to level up, understanding this reactivity system is a game-changer. It doesn't just streamline the development process; it enables you to create more interactive, scalable, and maintainable applications. I love Vue 3, and mastering its reactivity system has been enlightening and fun. Thanks for reading, and as always, happy coding!

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

Jesús Padrón

@padron4497 @jesus4497

Understanding Vue.js's <Suspense> and Async Components

In this blog post, we will delve into how and async components work, their benefits, and practical implementation strategies to make your Vue.js applications more efficient and user-friendly. Without further ado, let’s get started! Suspense Let's kick off by explaining what Suspense components are. They are a new component that helps manage how your application handles components that need to await for some async resource to resolve, like fetching data from a server, waiting for images to load, or any other task that might take some time to complete before they can be properly rendered. Imagine you're building a web page that needs to load data from a server, and you have 2 components that fetch the data you need as they will show different things. Typically, you might see a loading spinner or a skeleton while the data is being fetched. Suspense components make it easier to handle these scenarios. Instead of manually managing loading states and error messages for each component that needs to fetch data, Suspense components let you wrap all these components together. Inside this wrapper, you can define: 1. What to show while the data is loading (like a loading spinner). 2. The actual content that should be displayed once the data is successfully fetched. This way, Vue Suspense simplifies the process of handling asynchronous operations (like data fetching) and improves the user (and the developer) experience by providing a more seamless and integrated way to show loading states and handle errors. There are two types of async dependencies that can wait on: - Components with an async setup() hook. This includes components using with top-level await expressions. *Note: These can only be used within a component.* - Async Components. Async components Vue's asynchronous components are like a smart loading system for your web app. Imagine your app as a big puzzle. Normally, you'd put together all the pieces at once, which can take time. But what if some pieces aren't needed right away? Asynchronous components help with this. Here's how they work: - Load Only What's Needed: Just like only picking up puzzle pieces you need right now, asynchronous components let your app load only the parts that are immediately necessary. Other parts can be loaded later, as needed. - Faster Start: Your app starts up faster because it doesn't have to load everything at once. It's like quickly starting with the border of a puzzle and filling in the rest later. - Save Resources: It uses your web resources (like internet data) more wisely, only grabbing what’s essential when it's essential. In short, asynchronous components make your app quicker to start and more efficient, improving the overall experience for your users. Example: ` Combining Async Components and Suspense Let's explore how combining asynchronous components with Vue's Suspense feature can enhance your application. When asynchronous components are used with Vue's Suspense, they form a powerful combination. The key point is that async components are "suspensable" by default. This means they can be easily integrated with Suspense to improve how your app handles loading and rendering components. When used together, you can do the following things: - Centralized Loading and Error Handling: With Suspense, you don't have to handle loading and error states individually for each async component. Instead, you can define a single loading indicator or error message within the Suspense component. This unified approach simplifies your code and ensures consistency across different parts of your app. - Flexible and Clean Code Structure: By combining async components with Suspense, your code becomes more organized and easier to maintain. An asynchronous component has the flexibility to operate independently of Suspense's oversight. By setting suspensible: false in its options, the component takes charge of its own loading behavior. This means that instead of relying on Suspense to manage when it appears, the component itself dictates its loading state and presentation. This option is particularly useful for components that have specific loading logic or visuals they need to maintain, separate from the broader Suspense-driven loading strategy in the application. In practice, this combo allows you to create a user interface that feels responsive and cohesive. Users see a well-timed loading indicator while the necessary components are being fetched, and if something goes wrong, a single, well-crafted error message is displayed. It's like ensuring that the entire puzzle is either revealed in its completed form or not at all rather than showing disjointed parts at different times. How it works When a component inside the boundary is waiting for something asynchronous, shows fallback content. This fallback content can be anything you choose, such as a loading spinner or a message indicating that data is being loaded. Example Usage Let’s use a simple example: In the visual example provided, imagine we have two Vue components: one showcasing a selected Pokémon, Eevee, and a carousel showcasing a variety of other Pokémon. Both components are designed to fetch data asynchronously. Without , while the data is being fetched, we would typically see two separate loading indicators: one for the Eevee Pokemon that is selected and another for the carousel. This can make the page look disjointed and be a less-than-ideal user experience. We could display a single, cohesive loading indicator by wrapping both components inside a boundary. This unified loading state would persist until all the data for both components—the single Pokémon display and the carousel—has been fetched and is ready to be rendered. Here's how you might structure the code for such a scenario: ` Here, is the component that's performing asynchronous operations. While loading, the text 'Loading...' is displayed to the user. Great! But what about when things don't go as planned and an error occurs? Currently, Vue's doesn't directly handle errors within its boundary. However, there's a neat workaround. You can use the onErrorCaptured() hook in the parent component of to catch and manage errors. Here's how it works: ` If we run this code, and let’s say that we had an error selecting our Pokemon, this is how it is going to display to the user: The error message is specifically tied to the component where the issue occurred, ensuring that it's the only part of your application that shows an error notification. Meanwhile, the rest of your components will continue to operate and display as intended, maintaining the overall user experience without widespread disruption. This targeted error handling keeps the application's functionality intact while indicating where the problem lies. Conclusion stands out as a formidable feature in Vue.js, transforming the management of asynchronous operations into a more streamlined and user-centric process. It not only elevates the user experience by ensuring smoother interactions during data loading phases but also enhances code maintainability and application performance. I hope you found this blog post enlightening and that it adds value to your Vue.js projects. As always, happy coding and continue to explore the vast possibilities Vue.js offers to make your applications more efficient and engaging!...

Apr 24, 2024

6 mins

VueWeb PerformanceUXJavaScript

How to Make Coding Both Your Hobby and Profession with Jason Lengsdorf @ CityJS Conf 2024

Join us backstage at CityJS Conf for this conversation with Jason Lengsdorf. In this discussion, we explore strategies for reducing stress and anxiety among engineers, ensuring they maintain relevance in the dynamic world of coding. Jason emphasizes the importance of self-assurance and the role of play in fostering continual engagement with evolving technologies. Moreover, we get a sneak peek into Jason's latest venture, "Web Lunch," a platform where he converses with developers who have found harmony between their careers and personal satisfaction. Coding isn't just a job; it's a passion and a lifestyle. Jason highlights the significance of pursuing work that excites and challenges us, echoing the sentiment that coding can be both a career and a hobby. By infusing enjoyment and creativity into our coding endeavors, we can shape our professional trajectories in alignment with our values and interests. This approach not only minimizes regret but also maximizes happiness and fulfillment in our careers. Central to our discussion is the pivotal role of effective leadership in creating a supportive and encouraging work environment. Leaders who prioritize the well-being and happiness of their team members foster a culture of collaboration and empowerment. Through mentorship, guidance, and opportunities for growth, these leaders enable developers to align their personal goals with organizational objectives, leading to increased job satisfaction and professional fulfillment. Adaptability is key to sustained success in software engineering. Jason emphasizes the value of remaining open-minded and continuously learning, even when it means stepping out of our comfort zones. Embracing discomfort is an integral part of personal growth, allowing us to overcome obstacles and unlock our full potential. By nurturing a spirit of curiosity and adaptability, developers can navigate the complexities of their careers with resilience and enthusiasm....

Apr 25, 2024

2 mins

JavaScriptMentorship

How Vim Transformed My Workflow for the Better

> Before getting into this article, I want to say that this is just my personal experience. I don’t think Vim is the best editor for everyone, but it worked well for me. What is Vim for you who don’t know? Well, Vim is a text editor, which is a tool you use to write and edit text or code on your computer. What makes Vim unique is that it has lots of keyboard shortcuts. Instead of using the mouse to click around, you can keep your fingers on the keyboard, making you faster once you get the hang of it. I've always heard good things about Vim. People say it’s great and that once you learn it, it can speed up your coding. Vim users sometimes act like they’re in a special club, which is funny. But jokes aside, I was curious because of all the good things I heard, especially about how comfy and efficient it is for coding. I knew learning Vim wouldn’t be easy. From past experiences (like learning touch typing), I knew it would be like climbing a steep hill. It's akin to learning to ride a bike with special gear. At first, it might feel tricky, but once you get used to it, you can ride faster and smoother. There’s a stage I like to call the "Hybrid" point. It's when you’re getting to grips with something new, and you're not proficient at it yet, but you also start losing comfort with the old way of doing things. This phase is a bit frustrating, and I wasn’t sure I wanted to go through this again as it could have led to a decrease in productivity, which was the opposite of what I was aiming for. However, the prospect of a smoother and faster coding experience kept me excited to try Vim. Discovering a New Coding Comfort Zone So, I began my journey with Vim. I started learning the basic moves by chatting with GPT and playing Vim Snake – A fun game that's like the classic snake game, but with Vim controls – Slowly but surely, I got the hang of it. Once I felt more at ease, I decided to add a Vim plugin to my IDE. Right now, I'm using IntelliJ. This plugin let me use Vim right inside IntelliJ. It was the best of both worlds—I could use Vim’s quick commands and still have my IDE’s features, plus the option to use my mouse when I wanted to. In the beginning, the transition was rough. I felt out of my element, constantly reaching for my mouse. My coding speed took a hit as I was making more mistakes. For instance, I’d try to edit a line of code, and end up deleting it or accidentally switching to another tab. It was frustrating. But I pushed through the initial hurdles, working in this odd hybrid mode with both my mouse and Vim commands. Gradually, things started to click and my workflow began to improve. As the weeks went by, I got more and more comfortable. There were times I’d code without touching the mouse, and let me tell you, it felt AMAZING. Here's why: Just using your keyboard to zip around your code is a total game-changer. Here's a simple example to illustrate this. Let's say you want to move the line of code you're on to the line below. Normally, you'd grab your mouse, highlight the code, cut it, hit enter to create a new line, paste the code, then put the mouse down to continue coding. With Vim, you just press the "dd" keys to cut and copy the line, then “p” to paste it below. And just like that, you're done! It may seem small, but when all these little time-savers add up, you end up saving a TON of time. Without Vim With Vim --- But the magic of Vim doesn't end there. You can tweak Vim in numerous ways by adding your own commands, modifying existing ones, or loading up on plugins to extend its functionality. For instance, I tried out the easy-motion plugin and it’s been a game-changer for navigating through files. I also set up shortcuts to switch between tabs, which has made things even smoother. With all these enhancements, I found myself breezing through code like a pro and seeing what I needed in no time. And if I ever need a new command, a quick chat with GPT sets me right back on track! The more I explored Vim, the more I discovered its immense potential. It's not just a text editor; it's a powerful tool that can be molded to fit your coding style. From creating custom key mappings to defining your own text objects, Vim allowed me to tailor my editing environment exactly how I wanted. And the community around Vim is incredible. There’s a plethora of resources: tutorials like vimtutor, courses such as Vim Basics Course, Learning Vim in a Week, interactive apps, blogs, and plugins available that can help overcome any challenge I faced. It's been a rewarding journey that not only improved my efficiency but also broadened my perspective on what's possible with the right tools. The journey with Vim has also opened up a new world of exploration for me. I’ve started checking out other text editors and tools that prioritize keyboard use, seeking to refine my setup further. Each new discovery, whether it's a handy plugin or a clever command, feels like unlocking a new level in a game. It’s exciting to think that there's so much more to learn and that I can continue to fine-tune my workflow. I know there's still much to explore, but the excitement keeps growing—it's genuinely enjoyable! Up next on my adventure is diving into Neovim, and I can't wait to share my experiences with it. Conclusion It's clear that stepping out of my comfort zone and delving into Vim has been nothing short of transformative. But it revamped my coding workflow and ignited a newfound curiosity to explore and learn. The hurdles encountered along the way were just stepping stones to achieving a level of proficiency that I now enjoy. Vim, with its simplicity yet profound flexibility, has proven to be more than just a text editor—it's a coder's companion on the journey towards efficiency and mastery. As I venture further, experimenting with Neovim and other tools, the horizon of possibilities keeps expanding. In the realm of coding, time is of the essence, and Vim has gifted me the ability to reclaim it, one keystroke at a time. It's not just about the shortcuts or the plugins; it's about the mindset of continuous learning and improvement that Vim instills. This blog post is not just an endorsement of Vim but a testament to the boundless exploration that awaits when one is willing to embrace new tools and methodologies....

Dec 20, 2023

5 mins

VimToolingSoftware EngineeringTips

Transforming Auth in an AI World with Rod Boothby

In today's digital landscape, the need for secure identity verification has become paramount. With the increasing risks of personal data exposure and the rise of sophisticated cyber threats aided by Artificial Intelligence, it is crucial to adopt robust verification processes to protect individuals and organizations alike. In a recent discussion with Rod Boothby, CEO of ID Partner Systems, the significance of trusted institutions for identity verification was emphasized, particularly the efficiency of bank-based ID verification over traditional methods. One of the key takeaways from the conversation was the importance of continuous authentication. As technology advances, so do the methods employed by cybercriminals. Deepfake technology, for instance, poses a significant threat to identity verification systems. To combat this, tighter security measures and continuous authentication are essential. By constantly verifying and validating user identities, organizations can stay one step ahead of potential fraudsters. Rod Boothby also highlighted the need for a developer-focused approach to identity verification. By providing developers with the tools and resources they need, companies like ID Partner Systems aim to streamline the verification process and enhance security. This approach not only ensures a more efficient experience for users but also allows for the integration of behavioral biometrics, which can further strengthen the verification process. Download this episode here....

Apr 22, 2024

1 min

Engineering Leadership

Understanding Vue's Reactive Data

Introduction

What is Vue's Reactive Data?

How does it work?

Venturing Further into the Depths

Tracking (Dependency Collection)

Trigger Method

Conclusion

Jesús Padrón

You might also like

Understanding Vue.js's <Suspense> and Async Components

How to Make Coding Both Your Hobby and Profession with Jason Lengsdorf @ CityJS Conf 2024

How Vim Transformed My Workflow for the Better

Transforming Auth in an AI World with Rod Boothby

You might also like

Understanding Vue.js's <Suspense> and Async Components

How to Make Coding Both Your Hobby and Profession with Jason Lengsdorf @ CityJS Conf 2024

How Vim Transformed My Workflow for the Better

Transforming Auth in an AI World with Rod Boothby