vue3 watch 参数

Vue3中的watch函数有三个参数，分别为：
1. name：需要监听的属性，可以是一个ref、reactive对象或者一个函数，返回需要监听的值。
2. handler：监听到属性变化后的回调函数，可以是一个箭头函数或者普通函数，接收两个参数，分别为最新值和上一次的值。
3. options：配置项，是一个可选的对象，可以设置深度监听、立即执行等选项。

下面是一个示例代码，演示了如何使用watch函数监听ref类型的数据：

<template>
  <div>
    <h2>{{name}}</h2>
    <<button @click="changeName">修改姓名</button>
  </div>
</template>

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

export default {
  setup() {
    const name = ref('小明')

    watch(name, (newValue, oldValue) => {
      console.log('修改了name', newValue, oldValue)
    })

    function changeName() {
      name.value += '666'
    }

    return {
      name,
      changeName
    }
  }
}
</script>

相关问题

vue3 watch参数

在Vue3中，watch的参数可以是一个ref所定义的响应式数据，也可以是一个包含多个ref的数组对象。在情况一中，我们可以使用watch(sum, callback)来监视一个ref所定义的响应式数据，当sum的值发生变化时，会触发回调函数callback。而在情况二中，我们可以使用watch([sum, msg], callback)来同时监视多个ref所定义的响应式数据，当sum或msg的值发生变化时，会触发回调函数callback。需要注意的是，在Vue3中，watch的参数是一个数组，而不是对象。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue中监听路由参数的变化及方法](https://download.csdn.net/download/weixin_38732744/13674017)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [【Vue3】Vue3中监视watch和watchEffect使用（图文+代码）](https://blog.csdn.net/dxnn520/article/details/126463831)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

vue2 watch参数

Vue2中的watch选项可以用来监听数据的变化并执行相应的操作。它有以下几个参数：

1. immediate：是否在组件挂载时立即执行一次回调函数，默认为false。
2. deep：是否深度监听嵌套对象内部值的变化，默认为false。
3. handler(newVal, oldVal)：数据变化时执行的回调函数，newVal为变化后的值，oldVal为变化前的值。
4. immediate：是否在组件挂载时立即执行一次回调函数，默认为false。
5. deep：是否深度监听嵌套对象内部值的变化，默认为false。

例如，我们可以使用watch来监听一个数据的变化：

watch: {
  myData: {
    handler(newVal, oldVal) {
      console.log('myData changed from', oldVal, 'to', newVal)
    },
    immediate: true,
    deep: true
  }
}