VUE3中watch监听使用实例详解

标题：VUE3中watch监听使用实例详解

在Vue 3中，使用watch监听数据变化变得更加简单和高效。下面详细讲解Vue 3中watch的使用实例。

使用watch监听简单数据变化

定义数据和watch

<template>
  <div>
    {{ number }}
  </div>
</template>

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

export default {
  setup() {
    const state = reactive({
      number: 0
    });

    watch(() => state.number, (newVal, oldVal) => {
      console.log(`new: ${newVal}, old: ${oldVal}`);
    });

    return {
      ...state
    };
  }
};
</script>

在上述代码中，我们创建了一个state对象，并定义了number属性。通过watch监听number属性的变化，并调用回调函数进行处理。在回调函数中，我们可以得到新值和旧值，可以根据实际情况进行操作。

改变数据值

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

export default {
  setup() {
    const state = reactive({
      number: 0
    });

    watch(() => state.number, (newVal, oldVal) => {
      console.log(`new: ${newVal}, old: ${oldVal}`);
    });

    const changeNumber = () => {
      state.number++;
    };

    return {
      ...state,
      changeNumber
    };
  }
};
</script>

我们添加了一个按钮，通过调用changeNumber方法改变number的值，这时候我们可以在控制台看到“new”的值在每次改变时都会打印出来。

使用watch监听深层次数据变化

定义嵌套数据和watch

<template>
  <div>
    {{ user.name }}
    {{ user.age }}
  </div>
</template>

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

export default {
  setup() {
    const user = reactive({
      name: 'John',
      age: 18,
      address: {
        country: 'USA',
        city: 'NewYork'
      }
    });

    // 需要添加深度监听
    watch(
      () => user,
      (newVal, oldVal) => {
        console.log(`new: ${JSON.stringify(newVal)}, old: ${JSON.stringify(oldVal)}`);
      },
      { deep: true }
    );

    const changeUser = () => {
      user.name = 'Paul';
    };

    return {
      user,
      changeUser
    };
  }
};
</script>

我们在上述代码中定义了一个user对象，在watch的回调函数中打印出user对象的值。我们需要在watch的第三个参数中添加{deep: true}来实现深层次监听。

改变深层次数据的值

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

export default {
  setup() {
    const user = reactive({
      name: 'John',
      age: 18,
      address: {
        country: 'USA',
        city: 'NewYork'
      }
    });

    // 需要添加深度监听
    watch(
      () => user,
      (newVal, oldVal) => {
        console.log(`new: ${JSON.stringify(newVal)}, old: ${JSON.stringify(oldVal)}`);
      },
      { deep: true }
    );

    const changeUser = () => {
      user.name = 'Paul';
      user.address.country = 'UK';
    };

    return {
      user,
      changeUser
    };
  }
};
</script>

我们添加了一个按钮，通过调用changeUser方法改变user对象中的值，这时候我们可以在控制台看到“new”的值在每次改变时都会打印出来，包括了深层次的数据变化。

到此，Vue 3中watch的使用实例就介绍完毕了。通过以上的示例，相信大家可以更好地掌握watch的使用方法，实现更为灵活高效的开发。