vue3: new value and old value returned by deep watcher always same

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>

I got a deep watcher for an object value, accroding to the document, it should get both the previous and current value of the object been watched.

But in this code, the new value and the old value returned by the deep watcher are always same. Why is that?

Thanks a lot for anyone help!

Juan Eizmendi · Accepted Answer · 2021-07-21 04:04:20Z

28

Ref: watch

Note: when mutating (rather than replacing) an Object or an Array and watch with deep option, the old value will be the same as new value because they reference the same Object/Array. Vue doesn't keep a copy of the pre-mutate value.

answered Jul 21, 2021 at 4:04

Juan Eizmendi

1,1649 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nikolay Over a year ago

key diffirence is use () => ({ ...form }), instead of () => form when define watch

GeekyADAMS · Accepted Answer · 2022-05-19 23:43:54Z

19

Use setup to watch instead...

import {reactive} from 'vue'

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

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

  return {
    form
  }
}

answered May 19, 2022 at 23:43

GeekyADAMS

1911 silver badge4 bronze badges

2 Comments

Jack_Hu Over a year ago

How does this answer the question? Vue doesn't store the previous value anywhere, and as reactive() creates a reference type, once it's changed, the old value is gone forever... To get around this, you could use the toRef() Vue function for each item in the reactive object, but that kind of defeats the point of using reactive in the first place. I'm wondering why this has as many up-votes as it does?

Zhiqiang Guo Feb 14 at 9:02

@Jack_Hu It worked for non-deep watchers , I guess up-votes are from those.

Бектур Муратов · Accepted Answer · 2024-05-27 10:10:22Z

0

const formTemplate = {
  name: '',
  password: ''
}

const app = {
  data() {
    return {
      form: {
        ...formTemplate
      },
      oldForm: {
        ...formTemplate
      },
    }
  },
  watch: {
    form: {
      handler(form) {
        console.log(form, this.oldForm);
        this.oldForm = JSON.parse(JSON.stringify(form))
      },
      deep: true
    }
  }
}

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

answered May 27, 2024 at 10:10

Бектур Муратов

811 silver badge5 bronze badges

Collectives™ on Stack Overflow

vue3: new value and old value returned by deep watcher always same

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related