Code Readability

Ref

Refs are awesome but their .value can give us a lot to talk about. Personally, I like keeping the following in mind:

1. How can we easily distinguish between a mutation and just reading a value?
2. How can we eliminate possibilities of introducing unintended side-effects?
3. How can we improve the code so that it reads like natural language?

Example

const optionA = ref('vue')
const optionB = ref('nuxt')

// I can work with this 
const choice = optionA.value
// but this is painful!
choice.value = optionB.value

// cluttered code logic with no semantic value
const msg = computed(() => `${optionA.value} & ${optionB.value} rock but ${choice.value} is best!`)

Insight

What if we save the ref.value syntax only to the left side of =. This makes it explicit that we are mutating a reactive value.

For the right side of the =, we can use the helper functions toValue() or unref(). They both communicate that we are reading a reactive value and protects us from introducing side-effects.

Personally, I favor toValue() over unref() because I feel it improves the declarative language of the code. Unref is more tied to the implementation details of the framework.

Declarative language tells us what something does, while imperative language focuses on how something is done.

const optionA = ref('vue')
const optionB = ref('nuxt')

// this tells me it wont be reactive anymore
const choice = toValue(optionA)
// this signals we are getting a value from a reactive property
choice.value = toValue(optionB)

// strong visual cues, less cognitive load, no side-effects
const msg = computed(() => `${toValue(optionA)} & ${toValue(optionB)} rock but ${toValue(choice)} is best!`)

I have found that this simple convention gives me and everyone else, clear visual boundries of what is going on with a ref and its effects, decreasing the mental effort of reading the code.