vue3: новое значение и старое значение, возвращаемые глубоким наблюдателем, всегда одинаковы

#vue.js #vuejs3

Вопрос:

 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> 

У меня есть глубокий наблюдатель за значением объекта, согласно документу, он должен получать как предыдущее, так и текущее значение наблюдаемого объекта.

Но в этом коде новое значение и старое значение, возвращаемое наблюдателем глубины, всегда одинаковы. Это почему?

Большое спасибо за любую помощь!

Ответ №1:

Ссылка: смотрите

Примечание: при изменении (а не замене) объекта или массива и просмотре с опцией deep старое значение будет таким же, как и новое значение, поскольку они ссылаются на один и тот же объект/массив. Vue не хранит копию предварительно измененного значения.