Reactive and ref functions and comparison analysis in vue3

reactive and ref functions

1. reactive

Accept the parameter of the object type data and pass it in and returns a responsive object

<script setup>
 // Import import { reactive } from 'vue'
 // Execute function Pass in parameters Variable reception const state = reactive({
   msg:'this is msg'
 })
 const setSate = ()=>{
   // Modify data and update view    = 'this is new msg'//No .value is required }
</script>
<template>
  {{  }}
  <button @click="setState">change msg</button>
</template>

2. ref

Receive data of simple type or object type and return a responsive object

<script setup>
 // Import import { ref } from 'vue'
 // Execute function Pass in parameters Variable reception const count = ref(0)
 const setCount = ()=>{
   // Modify the data and update the view must be added.value   ++
 }
</script>
<template>
  <button @click="setCount">{{count}}</button>
</template>

Notice:

• The ref function creates responsive data, and the return value is an object
• Use ref data in the template, omit .value, and cannot be omitted in js code (special: watch listening in js can be saved)

3. Reactive comparison ref

• All are used to generate responsive data
• Differences:
  • Reactive cannot process simple data, only supports reference data types, ref supports basic and reference data types
  • ref gets data through .value, reactive does not require .value
  • Ref creates responsive reference data types Low-level dependency reactive

This is the end of this article about reactive and ref functions and comparisons in vue3. For more related contents of reactive and ref functions, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!