vue3中的watch使用

最新推荐文章于 2025-10-11 14:39:42 发布

原创最新推荐文章于 2025-10-11 14:39:42 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

vue3 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了Vue3中watch的使用，包括基本的监听数据变化、监听多个数据源的方法，帮助开发者理解如何在Vue3组件中实现响应式的数据监控。

基本用法：

<template>
  <div>
    name: {{obj.name}}
    <br>
    list:
    <ul>
      <li v-for="(item, index) in obj.list" :key="index"> {{item}} </li>
    </ul>
    <hr>
    <button @click="changeName">改变name</button>
    <button @click="changeList">改变list</button>
  </div>
</template>
<script lang="ts">
import {defineComponent, reactive, watch} from 'vue';
export default defineComponent({
  setup () {
    let obj = reactive({
      name: '1111',
      list: ['222', '222222', '222222']
    })

    function changeName () {
      obj.name += '+'
    }

    function changeList () {
      obj.list[0] += '+'
    }

    watch(obj, () => {
      console.log(obj.name)
    }, {
      // 页面加载会先执行一次
      immediate: true
    })

    return {
      obj,
      changeName,
      changeList
    }
  }
})
</script>
<style scoped>
</style>

监听多个数据源：

<template>
  <div>
    age: {{obj1.age}}<br>
    name: {{obj.name}}
    <br>
    list:
    <ul>
      <li v-for="(item, index) in obj.list" :key="index"> {{item}} </li>
    </ul>
    <hr>
    <button @click="changeName">改变name</button>
    <button @click="changeList">改变list</button>
    <button @click="changeAge">改变age</button>
  </div>
</template>
<script lang="ts">
import {defineComponent, reactive, watch} from 'vue';
export default defineComponent({
  setup () {
    let obj = reactive({
      name: '1111',
      list: ['222', '222222', '222222']
    })
    let obj1 = reactive({
      age: 18
    })
    function changeName () {
      obj.name += '+'
    }

    function changeList () {
      obj.list[0] += '+'
    }

    function changeAge () {
      obj1.age++
    }

    watch([obj, obj1], () => {
      console.log(obj.name)
    }, {
      // 页面加载会先执行一次
      immediate: true
    })

    return {
      obj,
      changeName,
      changeList,
      changeAge,
      obj1
    }
  }
})
</script>
<style scoped>
</style>