Have the getter functions for reactive objects in Vue 3 been transformed into computed values?

Is the memoization of bookCount in this instance handled equivalently to a computed reference?

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ],

  get bookCount() {
    return this.books.length
  }
})

Answer №1

Indeed, that is correct. The getter will run each time the property is accessed.

To verify this, try using the getter in your template and trigger a re-render. You'll notice the getter running on every render, whereas a regular computed property won't unless its value changes.

For a detailed example, visit example.com

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modifying an element's value according to user input: Step-by-step guide

Within my dropdown menu, there is a single option labeled "Others". Upon selecting this option, a textbox appears allowing me to input custom text. Is it possible to dynamically update the value of the <option value="Others">Others</option>, ...

The value of a variable remains constant in an Angular controller

I am facing an issue with my HTML page that includes: <div ng-controller="MyCtrl"> <div ng-view>Some content</div> myVar: {{myVar}} </div> Along with an Angular controller: myModule.controller('MyCtrl', function($s ...

I'm having trouble accessing the data stored in req.user within the user controller, despite having integrated it into the user isLoggedIn middleware

I am encountering an issue where I cannot access my req.user in the usercontroller, even though I have implemented it in the usermiddleware. Both storing data in req.user and retrieving data using req.user from the middleware to my controller are not work ...

Error encountered while attempting to build Ionic 5 using the --prod flag: The property 'translate' does not exist on the specified type

I encountered an error while building my Ionic 5 project with the --prod flag. The error message I received is as follows: Error: src/app/pages/edit-profile/edit-profile.page.html(8,142): Property 'translate' does not exist on type 'EditProf ...

Exploring the World of Popper.js Modifiers

Within our React and Typescript application, we integrate the react-datepicker library, which utilizes popper.js. Attempting to configure PopperModifiers according to the example provided here: . Despite replicating the exact setup from the example, a typ ...

Exploring Vue 3 and Pinia: Achieving Reactivity in Stored Values

Currently, I am working on a project using Vue 3 with the Composition API and Pinia. Within my application, I have an auth store that retrieves the default email and password values from the store. import { useAuthStore } from "stores/auth"; const authSto ...

Should developers avoid using jQuery in ReactJS applications?

While working on a ReactJS project (or any other project), I personally prefer using pure JavaScript over jQuery. Lately, I've started questioning whether it's considered bad practice to use jQuery in ReactJS. Back when I was learning ReactJS, I ...

Is there a way to decrease a field in a MongoDB database on a daily basis?

In the process of constructing an Angular2 application using MEAN stack architecture, I have a field called Remaining Days in my MongoDB database. I am interested in having this field automatically decrement by 1 each day. Do you know if this is possible ...

Which is the best framework to transform a NextJS website into a desktop application: Electron, React-Native, or React-

After recently mastering ReactJS, I am currently utilizing it to create an application with NextJS. My goal is to make this application available as a desktop version as well. I have been introduced to Electron, React-Native, and React-Desktop, but I am u ...

How to fix XmlHttpRequest PUT File Upload error when uploading files larger than 1MB

Uploading files to a server (in this case, S3) has been a smooth process for files under ~1MB. However, larger files tend to fail intermittently during the send operation. The issue does not seem to be related to security measures, CORS settings, or signin ...

Unexpected Outcome Arises When Applying Lodash's Debounce Function to Axios API Call

I keep encountering an issue with my app where it updates every time text is typed. I've implemented debounce on an axios request to queue them up until the timer runs out, then they all go at once. But I want to limit the requests to one per 10-secon ...

Arrange array items according to the values of two attributes

Within my array of N objects, each object is structured with the following properties: { id: 'an id', description: 'a description', isUser: true/false } My goal is to sort this array based on two criteria: Firstly, any object w ...

Steps to indicate a cucumber test as incomplete using a callback function in a node environment

Can a cucumber test in Node be flagged as pending to prevent automated test failures while still specifying upcoming features? module.exports = function() { this.Given(/^Scenario for an upcoming feature$/, function(callback) { callback(); } ...

Navigating through directories (including nested ones) containing images in React Native; what's the best way to approach this

I am currently attempting to organize groups of images. Within the directory ./assets, there are several folders structured as follows: ./assets ├── 1x3 │ ├── 1.jpg │ ├── 2.jpg │ └── 3.jpg └── 3x3 ├── 1. ...

Ways to determine if the property of a document has been altered?

Currently, I am in the process of writing tests for an Express CRUD application. The specific route I am focused on is the account recovery route. This route accepts POST requests with an email included in the body. Essentially, the application will search ...

Show the image on top of the div block as the AJAX content loads

Implementing this task may seem easy and common, but I am struggling to figure it out! What should take five minutes has turned into an hour of frustration. Please lend me your expertise in getting this done. I have a div container block: <div cla ...

Having trouble finding the sum of values in an array using the Reduce method?

I have always used a 'for' loop to calculate sums in tables, but recently I learned about a better way - using the 'reduce' method. Following documentation and examples with simple arrays was easy enough, but now I am working with an ar ...

import JavaScript script from a NPM package installation

I am facing a challenge with my server where I do not have the ability to run npm due to lack of permissions, and only have access to Apache. Currently, I am in need of a JavaScript library that is typically deployed using npm, such as https://github.com/ ...

Issue: React error message indicates that the .map() function is not recognized. The API response is in the form of an object, making

As a newcomer to REACT.JS, I am currently facing the challenge of extracting data from an API for my project. Utilizing "Axios" for sending the get request, I have encountered a situation where the response comes back as an array in one API and as an objec ...

Create an HTTP-only cookie from the resolver function in Apollo GraphQL

My objective is to pass the 'res' from my context into a resolver in order to utilize 'context.res.cookie' within my signin function and send an http only cookie. Although my sign-in function works fine, I am unable to see the cookie ad ...