watch的用法

# watch的用法

我们用ref或者reactive所包裹起来的变量才能被watch监听到

# 用法

<script>
const message = ref('11')
watch(message, (newVal, oldVal) => {
  
}, {
  // deep: true 深度监听  而reactive不需要开启默认开启
})


let message2 = reactive({
   foo: {
     name: '李四'
   }
})
watch([message], (newVal, oldVal) => {
   // 任意一个值发生变化就会监听
})

// 如果我们只想监听单一属性需要改成函数
watch(() => message2.foo.name, (newVal, oldVal) => {
})

</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 配置项 ☀️

属性	说明	类型
deep	深度监听，reactive默认开启	boolean
immediate	立即执行一次	boolean
flush	默认pre组件更新之前调用，sync同步执行，post是组件更新之后执行	string

上次更新: 2024/01/20, 21:01:00

← vue3+ts 源码学习 watchEffect →