VUE3使用watch监测数据变化

 1 // 不要忘了导入要用的 API
 2 import { defineComponent, reactive, watch } from 'vue'
 3 
 4 export default defineComponent({
 5   setup() {
 6     // 定义一个响应式数据
 7     const userInfo = reactive({
 8       name: 'Petter',
 9       age: 18,
10     })
11 
12     // 2s后改变数据
13     setTimeout(() => {
14       userInfo.name = 'Tom'
15     }, 2000)
16 
17     /**
18      * 可以直接监听这个响应式对象
19      * callback 的参数如果不用可以不写
20      */
21     watch(userInfo, () => {
22       console.log('监听整个 userInfo ', userInfo.name)
23     })
24 
25     /**
26      * 也可以监听对象里面的某个值
27      * 此时数据源需要写成 getter 函数
28      */
29     watch(
30       // 数据源，getter 形式
31       () => userInfo.name,
32       // 回调函数 callback
33       (newValue, oldValue) => {
34         console.log('只监听 name 的变化 ', userInfo.name)
35         console.log('打印变化前后的值', { oldValue, newValue })
36       }
37     )
38   },
39 })

批量监测

 1 import { defineComponent, ref, watch } from 'vue'
 2 
 3 export default defineComponent({
 4   setup() {
 5     // 定义多个数据源
 6     const message = ref<string>('')
 7     const index = ref<number>(0)
 8 
 9     // 2s后改变数据
10     setTimeout(() => {
11       message.value = 'Hello World!'
12       index.value++
13     }, 2000)
14 
15     watch(
16       // 数据源改成了数组
17       [message, index],
18       // 回调的入参也变成了数组，每个数组里面的顺序和数据源数组排序一致
19       ([newMessage, newIndex], [oldMessage, oldIndex]) => {
20         console.log('message 的变化', { newMessage, oldMessage })
21         console.log('index 的变化', { newIndex, oldIndex })
22       }
23     )
24   },
25 })

来自于： https://vue3.chengpeiquan.com/component.html#基础用法

标签：监测数据,console,name,数据源,watch,userInfo,VUE3,log
来源： https://www.cnblogs.com/googlegis/p/16460179.html