Vue - watch 监听子组件 props 的变化

props 的变化由父组件决定，父组件中定义的变量如果是响应式的变量，在发生变化之后会自行流向子组件的 props。

在子组件中，由父组件流向子组件的数据发生了变化可以通过 onUpdated、watch 等函数监听。根据本博文的情况，watch 函数监听的对象要求一个响应式类型的数据，在 TS 中如果直接把 props 传递给 watch 函数，编译不通过。

而，toRef 或 toRefs 可以将一个普通对象或者本身就是响应式对象提取出来，与源变量进行链接，如果源变量就是一个响应式对象，意思是延续其响应式，如果是一个普通变量，就是转换其类型。

file:[MyComponent.vue]
const props = defineProps({
  strHtml: {
    type: String,
    required: true
  },
  config: {
    type: Object,
    required: false
  }
});

const toRefStrHtml = toRef(props, "strHtml");

watch(toRefStrHtml, () => {
  // ......
})

由父组件传递的 strHtml 值发生了变化之后，watch 会获取到它变化的情况，从而触发回调函数做其他的副作用。

tip:[start]toRef 在我的博文——Vue reactive 解构赋值丢失响应式，toRef 维持响应式，有更多的探讨。tip:[end]