vue3：深度观察者返回的新值和旧值始终相同

Question

const app = {
  data(){
    return {
      form: {
        name: '',
        password: ''
      }
    } 
  },
  watch: {
    form: {
      handler(form, oldForm){
        console.log(form, oldForm);
      },
      deep: true
    } 
  }
}

Vue.createApp(app).mount('#app')

<script src="https://unpkg.com/vue@next"></script>
<main id="app">
  <form>
    <input v-model="form.name"/>
    <input v-model="form.password"/>
  </form>
</main>

我有一个对象值的深度观察器，根据文档，它应该同时获取被观察对象的先前值和当前值。

但在这段代码中，深度观察者返回的新值和旧值始终相同。这是为什么？

非常感谢任何人的帮助！

Answer 1

参考：手表

注意：当改变（而不是替换）对象或数组并使用 deep 选项进行观察时，旧值将与新值相同，因为它们引用相同的对象/数组。Vue 不保留变异前值的副本。

Answer 2

使用设置来观看...

import {reactive} from 'vue'

setup() {
  const form = reactive({
      name: '',
      password: ''
  })

  watch(
        () => ({ ...form }),
        (newVal, oldVal) => {
            console.log('Form changed', newVal, oldVal)
        }
    )

  return {
    form
  }
}