Vue.js 中“watch”的功能是什么？它是如何工作的？

您好！Vue.js 中的 watch 功能是如何工作的，它的作用是什么？

手表非常容易使用。 watch 功能可以让你通过监听 Vue 组件中一些信息（状态）的变化来执行必要的任务。下面我用一个简单的例子来解释：

1. ;部分： UI 元素放置在此处。
2. ;部分：这是放置组件的脚本部分的地方。

让我们看一个简单的例子。在此示例中，我们监视输入到输入元素中的值，每次值更改时，我们都会记录到控制台：

<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>

基本概念：

1. 使用 ref: 声明变量 我们使用 ref 创建一个变量。这个变量是反应性的，如果它的值发生变化，Vue 将自动重新渲染组件。

   const name = ref('')

1. 观看功能： watch 函数将要监视的变量作为第一个参数，将回调函数作为第二个参数。回调函数的第一个参数是新值，第二个参数是旧值。

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

您可以使用

watch 函数监视任何反应变量（包括 ref、反应变量或计算变量）。该方法允许您在组件中的数据发生变化时执行特定操作。

您可以在网络上关注我们，如果文章有用，请通过评论和 Vuechi 与您的朋友分享。 ？

以上是Vue.js 中“watch”的功能是什么？它是如何工作的？的详细内容。更多信息请关注PHP中文网其他相关文章！