How do i use Hooks in Vue? Meet Ref!

I’m writing this once again as a self reminder and personal note, feel free to read try to comprehend my mind at 3am.

So…you’ve learned this thing called reactivity, and it’s quite a big thing in react. Hook, pop in some random name, and function for your variable, and boom, there is your variable that will react to whatever you throw at it, add, subtract, or any other data manipulation whatever you like.

I know that’s in the past, but we can talk about that in the future, as i am still can’t get over the fact that react literally moved their website to react.dev for latest docs…like how much things have changed that you need a whole new web for updates..

Okay, going back to topic, now we talk Vue.

In Vue, reactivity is handled by ref,

meet ref.

<script>
import { ref } from 'vue';
</script>

now meet ref’s friend, setup()

<template>
  <h1>{{ id }}</h1>
  
  <button @click="addId">+</button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup(){
    const id = ref(0);

    function addId(){
      id.value++;
    }

    return{
      id,
      add
    }
  }
}

</script>

now, what is this? Honestly, if you came from React, you might be more familiar with this

export default function MyApp() {
  const [id, setId] = useState(0);

  function addId() {
    setId(id + 1);
  }

  return(
    <div>
      <h1>{id}</h1>
      <button onClick={addId}>+</button>
    </div>
  )
}

It’s literally the same thing….well sort of….

So this is for the future reference if someone asked, wait how do i do this in Vue, then i can just go back to this and have a reminder.

Personally, i see no difference between these two in terms of complexicty, i’m not an afficionado when it comes to programming, as long as it fits the client needs, then i’m all for it.