本文章仅供个人学习记录所用

监听 ref 类型

第一个参数是响应式对象，第二个参数是回调函数

const a = ref(0)  
watch(a, (newVal, oldVal) => {
  console.log(newVal, oldVal)
})

监听 reactive 类型

首先采用 ref 的那种方式，我们会发现报错

const data = reactive({
  count: 0
})

watch(data.count, (newVal, oldVal) => { // 错误写法
  console.log(newVal, oldVal)
})

错误信息

[Vue warn]: Invalid watch source: 0** A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types. **

所以我们根据上述的报错信息，将这个参数改成一个 function的形式即可

const data = reactive({
  count: 0
})

watch(() => data.count, (newVal, oldVal) => {
  console.log(newVal, oldVal)
})

同时监听多个

watch 第一个参数可以使用数组的形式

watch([a, () => data.count], (newVal, oldVal) => {
  console.log(newVal, oldVal)
})

watchEffect的使用

// watchEffect 监听
watchEffect(() => {
  console.log(a.value, data.count) // ref  类型的需要加.value
})

🆚watch和watchEffect的特性对比

watch的特性

• 首次加载不会监听，只会被监听数据发生变化时才监听到。（惰性）
• 可以拿到新的值以前的值
• 可以同时监听多个数据的变化

watchEffect的特性

• 首次加载就会监听
• 只能拿到最新的值
• 不需要指定监听的数据，组件初始化的时候就会执行一次用以收集依赖，而后收集到的依赖发生变化，这个回调才会再次执行

高级用法

他们的高级用法等后面应用的时候单独再记录下

完整案例代码体验

<template>
  <div>
    <h1>count :{{ count }}</h1> 
    <h1>a :{{ a }}</h1>
    <button @click="increase">新增</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, watch, watchEffect } from 'vue';
export default defineComponent({
  name: 'HelloWorld',
  setup() {
    let a = ref(0)
    const data = reactive({
      count: 0,
      increase: () => { data.count ++; a.value += 2 } // 这是改变两个类型数据的方法
    })
    // watch 监听
    watch([a, () => data.count], (newVal, oldVal) => {
      console.log(newVal, oldVal)
    })
    // watchEffect 监听
    watchEffect(() => {
      console.log(a.value, data.count) // ref  类型的需要加.value
    })
    const refData = toRefs(data)
    return {
      ...refData,
      a
    }
  }
});
</script>