Can Vue instances support private computed properties?

Question

Can Vue instances support private computed properties?

Vue is a versatile tool that I utilize for both service classes and components.

When it comes to reactive computeds, they prove to be incredibly beneficial. However, I often find myself wanting a clear way to differentiate between public interface computeds and those meant for internal calculations only within the service class.

In TypeScript, marking methods or properties as private is straightforward, but when it comes to defining computeds with get, I am unsure of the best approach.

Would something like this be the most effective solution, or is there a better alternative?

private get myComputed(): number {
  # ...
}

typescript vue.js

Answer 1

Answer №1

When utilizing the innovative javascript private operator #, it renders the attribute inaccessible at runtime by the template or through the use of refs.
The Typescript private keyword creates the illusion of privacy during build time and within the IDE, however, once compiled, the field remains accessible.

For computed values, there are a couple of approaches:

// supported in Typescript 4.3
get #myComputed () {
  return 'I am privately accessed at runtime'
}

private get myComputed () {
  return 'I am only private at compile time'
}

On a side note: for leveraging Vue reactivity with "services" and "helpers", consider using the @vue/composition-api package for Vue 2. This allows you to export composables (reactive variables, computeds, watchers...) without creating a full Vue component.

To create truly private computeds, refrain from exporting them from your composable:

export function useHelper () {
  const counter = ref(0)
  // Private computed property not visible to outside clients of the composable
  const hasReachedMax = computed(() => counter > 10))

  const increment = () => {
    if(hasReachedMax) { return }
    counter.value++
  }
  
  return { counter, increment }
}

Answer 2

When utilizing the innovative javascript private operator #, it renders the attribute inaccessible at runtime by the template or through the use of refs.
The Typescript private keyword creates the illusion of privacy during build time and within the IDE, however, once compiled, the field remains accessible.

For computed values, there are a couple of approaches:

// supported in Typescript 4.3
get #myComputed () {
  return 'I am privately accessed at runtime'
}

private get myComputed () {
  return 'I am only private at compile time'
}

On a side note: for leveraging Vue reactivity with "services" and "helpers", consider using the @vue/composition-api package for Vue 2. This allows you to export composables (reactive variables, computeds, watchers...) without creating a full Vue component.

To create truly private computeds, refrain from exporting them from your composable:

export function useHelper () {
  const counter = ref(0)
  // Private computed property not visible to outside clients of the composable
  const hasReachedMax = computed(() => counter > 10))

  const increment = () => {
    if(hasReachedMax) { return }
    counter.value++
  }
  
  return { counter, increment }
}

Can Vue instances support private computed properties?

Answer №1

Similar questions

Securing User Profiles in Firebase

Switching between various components based on conditions within the same route in Angular

Emphasize x-axis heading in a Highcharts graph

Learn the process of sending a delete request to a REST API with Angular

How can you make sure that a class property in TypeScript always matches the name of the class?

Retrieving locale messages by accessing the app context from customized .js files

What's the deal with that see-through navigation bar?

Retrieving the output of a parent computed method in VueJS, using a child component

synchronize the exchange of information and events between two components

What is the proper way to manage redirecting with Passport.js in Nuxt SSR?

Exploring Touch Interactions in Vue.js 2.0

The Quasar q-form reset button fails to erase the data stored in the form

Exploring the concept of union types and typeguards in TypeScript

The Hapi response fails to display JSON data in a nested tree format

Modifying the color of the error icon in Quasar's q-input component: a step-by-step guide

Invent a customizable receptacle for component

What is the best way to link y and x coordinates to an image in a Vue component?

Which Index Type is the best fit for my assignment?

Errors TS2585 and TS2304 encountered during compilation of TypeScript file using Axios

I am having trouble getting Angular 6 to work with lowdb