您现在的位置是：首页 > 编程语言学习 > 前端编程语言 > 文章正文前端编程语言

讲解vue3中的watch监听的作用及使用方法

2022-11-18 10:22:40 前端编程语言

简介我们先说下watch监听的作用：1，计算属性允许我们声明性地计算衍生值。然而在有些情况下，我们需要在状态变化时执行一些副作用；2，例如更...

我们先说下watch监听的作用：

1，计算属性允许我们声明性地计算衍生值。然而在有些情况下，我们需要在状态变化时执行一些“副作用”；
2，例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。组合式 API 中，我们可以使用 watch 函数在每次响应式状态发生变化时触发回调函数从而来进行一些其它的操作；
3，可以在页面使用多次；

1，可以监听什么数据：

watch监听的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组；

2，使用监听：

<script setup>

import { reactive, ref, watch, onMounted } from "vue";

// 定义响应式数据

const message = ref("");

const a = ref(1);

const b = ref(2);

const messageList = ref([

  { name: "Eula", age: "18", isActive: false },

  { name: "Umbra", age: "17", isActive: false },

  { name: "Kaya", age: "19", isActive: false },

  { name: "Diluk", age: "19", isActive: false },

]);

const obj = reactive({ count: 0 });

// 定义一个简单的seeter函数

function count() {

  return a.value + b.value;

}

// 1，监听一个响应式字符串

watch(message, (newX) => {

// 如果等于123 来修改messageList的值看messageList的变化会不会被监听：可以监听到数组需要添加深度监听

  if (newX == "123") {

    messageList.value.push({ name: "222" });

    console.log("messageList.value", messageList.value);

  }

});

//2，监听一个响应式数组  要使用深度监听 deep:true

watch(

  messageList,

  (newX) => {

    console.log(`拿到改变后的数组：`, messageList.value);

    // 如果等于3 在改变a的值看下面的count函数会不会监听到  监听到了

    if (count() == 3) {

      a.value = 3;

    }

  },

  { deep: true }

);

// 3，监听一个函数

watch(count, (newX) => {

  console.log("新的函数值：", newX); // 3+2 = 5 监听到了函数值的变化

});

//4，多个来源组成的数组  按照顺序进行监听的

watch([message, messageList, count], ([newX, newY, newZ]) => {

  console.log("监听的数组第一项newX：", newX);

  console.log("监听的数组第二项newY：", newY);

  console.log("监听的数组第三项newX：", newZ);

});

onMounted(() => {

  console.log("Mounted");

});

</script>

<template>

  <div class="watch">

    <h3>watch监听演示</h3>

    <p>Message is: {{ message }}</p>

    <input v-model="message" placeholder="请输入123触发其它监听" />

  </div>

</template>

<style scoped></style>

3，监听器里面可以进行异步操作：

触发监听后可以立即执行异步的请求操作；这解决了计算属性不能操作异步的弊端；因为计算属性(computed)是通过return返回值传递参数异步操作的时候return是没有意义的；

<script setup>

import { ref, watch } from 'vue'

const question = ref('')

const answer = ref('Questions usually contain a question mark. ;-)')

// 可以直接侦听一个 ref

watch(question, async (newQuestion, oldQuestion) => {

  if (newQuestion.indexOf('?') > -1) {

    answer.value = 'Thinking...'

    try {

      const res = await fetch('https://yesno.wtf/api')

      answer.value = (await res.json()).answer

    } catch (error) {

      answer.value = 'Error! Could not reach the API. ' + error

    }

  }

})

</script>

<template>

  <p>

    Ask a yes/no question:

    <input v-model="question" />

  </p>

  <p>{{ answer }}</p>

</template>

4，不能直接监听响应式对象的属性值

const obj = reactive({ count: 0 })

// 错误，因为 watch() 得到的参数是一个 number

watch(obj.count, (count) => {

console.log(`count is: ${count}`)

})

解决方法：需要使用一个函数返回这个属性值

// 提供一个 getter 函数

watch(

  () => obj.count,

  (count) => {

    console.log(`count is: ${count}`)

  }

)

5，watchEffect与 watch的区别

watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。 watch会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。
默认情况下，watch 是惰性的，因此仅当依赖项更改时才会触发。watchEffect 在创建组件后立即运行，然后跟踪依赖关系。
watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。

6，回调的触发时机