vuejs3 - 为什么 Vue3 Composition API - watch 的选项 deep 在响应式中不起作用，但在响应式 getter 中起作用？

Question

1. 箭头函数的深层选项是工作。
2. 原始反应对象的深度选项不起作用。

看起来像一个错误，为什么 watch 的选项 deep 在响应式中不起作用，但在响应式 getter 中起作用？

1.代码

setup() {
    const state = reactive({
      id: 1,
      attrs: {
        date: new Date()
      }
    })

    watch(state, (val, prevVal) => {
      console.log('non-deep', val, prevVal)
    })

    watch(
      () => state,
      (val, prevVal) => {
        console.log('non-deep getter', val, prevVal)
      }
    )

    watch(
      state,
      (val, prevVal) => {
        console.log('deep', val, prevVal)
      },
      { deep: true }
    )

    watch(
      () => state,
      (val, prevVal) => {
        console.log('deep getter', val, prevVal)
      },
      { deep: true }
    )

    const changeDate = () => (state.attrs.date = new Date())

    return {
      state,
      changeDate
    }
  }

2.控制台日志

non-deep Proxy {id: 1, attrs: {…}} Proxy {id: 1, attrs: {…}}
deep Proxy {id: 1, attrs: {…}} Proxy {id: 1, attrs: {…}}
deep getter Proxy {id: 1, attrs: {…}} Proxy {id: 1, attrs: {…}}

标签： vuejs3