Vue.js da (ref va reactive) farqi

When choosing ref and reactive hooks in Vue.js, it is necessary to understand their differences and in what situations to use them. Both hooks are used to create reactive data, but the way they work and their usage is slightly different.

ref

Conveniences

1. Suitable for primitive values: ref is mainly useful for primitive types (string, number, boolean). For example, for simple values ​​like count, message.

2. Referencing DOM Elements: ref is used to store and refer to DOM elements. For example,

   .

3. Accessing the value is easy: when working with ref, the value can be accessed and changed via .value.

An example

import { ref } from 'vue';

const count = ref(0);
count.value++; // Qiymatni oshirish

reactive

Conveniences

1. Suitable for complex data structures: Convenient for data with complex structures such as reactive object or array. It makes the whole object or array reactive.
2. Working with objects: reactive makes all properties of an object reactive, so properties can be accessed and modified directly.

An example

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  name: 'Vue'
});
state.count++; // Qiymatni oshirish
state.name = 'Vue 3'; // Xususiyatni o'zgartirish

differences between ref and reactive

1. Value Type:

   • ref is suitable for simple values ​​and is accessed via .value.
   • suitable for objects or arrays with reactive complex state and directly access properties.

2. Use cases:

   • ref is used for primitive types (string, number, boolean) and DOM elements.
   • It is used for complex structures such as reactive object or array.

3. Reactivity:

   • ref reacts only one value.
   • reactive makes an entire object or array reactive, including all its properties.

Choose when it's convenient

• If you have a simple value or need to refer to a DOM element, use ref.
• If you have an object or array with many properties, use reactive.

A common example

Here is an example of using ref and reactive together:

<template>
  <div>
    <p>Message: {{ message }}</p>
    <p>Todos:</p>
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
    </ul>
    <input v-model="newTodoText" placeholder="New todo" />
    <button @click="addTodo">Add Todo</button>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

const message = ref('Hello, Vue 3!');
const todos = reactive([
  { id: 1, text: 'Learn Vue 3' },
  { id: 2, text: 'Build something awesome' }
]);
const newTodoText = ref('');

function addTodo() {
  todos.push({ id: todos.length + 1, text: newTodoText.value });
  newTodoText.value = '';
}
</script>

This example shows how ref and reactive hooks can be used together. The choice depends on what type of data you are working with.

PS: Why does it say that in the picture above, ?????????? , I will answer this question in the video lesson :)

You can follow us on networks and if the article is useful, comment and share it with your Vuechi friends. ?

The above is the detailed content of Vue.js da (ref va reactive) farqi. For more information, please follow other related articles on the PHP Chinese website!