What is the function of \'watch\' in Vue.js and how does it work?

Hello! How does the watch function work in Vue.js and what is its function?

watch is very easy to use. The watch function allows you to perform the necessary tasks by monitoring the change of some information (state) in the Vue component. I will explain below with a simple example:

1. UI elements are placed here.
2. This is where the script part of the component is placed.

Let's look at a simple example. In this example, we monitor the value entered into an input element, and every time the value changes, we log to the console:

<template>
  <div>
    <input v-model="name" placeholder="Ismingizni kiriting">
    <p>Ismingiz: {{ name }}</p>
  </div>
</template>

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

// name o'zgaruvchisini e'lon qilamiz
const name = ref('')

// name o'zgaruvchisini kuzatamiz
watch(name, (newValue, oldValue) => {
  console.log(`Ism o'zgardi: ${oldValue} dan ${newValue} ga`)
})
</script>

Basic concepts:

1. Declare a variable with ref: we create a variable using ref. This variable is reactive, and if its value changes, Vue will automatically re-render the component.

   const name = ref('')

1. watch function: The watch function takes the variable to be watched as the first argument, and the callback function as the second argument. The first argument of the callback function is the new value and the second argument is the old value.

   watch(name, (newValue, oldValue) => {
     console.log(`Ism o'zgardi: ${oldValue} dan ${newValue} ga`)
   })

You can watch any reactive variable (including ref, reactive, or computed variables) using the

watch function. This method allows you to perform a specific action when the data in the component changes.

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

The above is the detailed content of What is the function of \'watch\' in Vue.js and how does it work?. For more information, please follow other related articles on the PHP Chinese website!