watch监视ref的属性

watch函数的第一个参数是监视的数据,第二个是监视函数的回调,第三个是其他配置项.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<template>
<h2>当前求和为：{{sum}}</h2>
  <button @click="sum++">点我+1</button>
 
  <hr>
 
  <h2>当前的信息为：{{msg}}</h2>
  <button @click="msg+='!'">修改msg</button>
</template>
<script>
import {ref,watch} from 'vue'
export default {
  name: "Demo",
  setup(){
    let sum=ref(0)
    let msg=ref("你好啊")
 
    //情况一：监视ref所定义的一个响应式数据
    watch(sum,(newValue,oldValue)=>{
      console.log('sum变了',newValue,oldValue)
    },{immediate:true})
 
    //情况二：监视ref所定义的多个响应式数据
    watch([sum,msg],(newValue,oldValue)=>{
      console.log('sum或msg变了',newValue,oldValue)
    },{immediate:true})
 
    return {
      sum,msg
    }
  }
}
</script>
 
<style scoped>
 
</style>