Ref vs Reactive on vue js

  1. Data Type
const nama = ref({
name: 'Alfa'
})
const data = reactive({
name: 'Alfa',
email: 'malfariza45@gmail.com',
})
console.log(nama.value.name);
console.log(data.name);
console.log(data.email);
const nama = ref({
name: 'Alfa'
})
const data = reactive({
name: 'Alfa',
email: 'malfariza45@gmail.com',
})
// not error
nama = {name: 'Ahlaq'}
// err
data = {name: 'Ahlaq'}
// not error
data.name = 'Ahlaq';
<template>
<div>
{{ name }}
</div>
</template>
<script setup>
import {ref} from 'vue';
const name = ref('Alfa')
</script>
<template>
<div>
{{ data.name }}
</div>
</template>
<script setup>
import {reactive} from 'vue';
const data = ref({name: 'Alfa'})
</script>
<template>
<div>
{{ data.name }}
</div>
</template>
<script setup>
import {reactive, toRefs} from 'vue';
const data = ref({name: 'Alfa'})
toRefs(data);
</script>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store