javascript - Vuejs Mutating Object passed as a prop - Stack Overflow

admin管理员组

文章数量:1355710

If I'm passing (a reference to) an Object as a prop is it OK to mutate values in the prop?

I'm developing a web app which will require a lot of values to be passed to a ponent, and I'm trying to find the best way of passing the values to the ponent and back to the parent.

From everything I've read mutating a prop is the wrong way to do things, because next time the ponent is updated the values are passed back to the child ponent overwriting the mutations. But only the reference to the object is passed so any mutations to the values in the object prop happen to the original object in the parent ponent. Also Vuejs does not plain about mutating props when this happens.

const subComponent = {
    name: "subComponent",
  template: `
    <div>
        Sub Component Input
        <input type="text" v-model="objectProp.val1"></input>
    </div>`,
  props: {
    objectProp: {
      required: false,
      default: () => {return {val1: "carrot"}}
    }
  }
}

const aComponent = {
    name: "aComponent",
  template: `
    <div>
        val1: {{mainObject.val1}}
        val2: {{mainObject.val2}}
        <sub-ponent :objectProp="mainObject"></sub-ponent>
    </div>`,
  data: function() {
      return{
        mainObject: {
        val1: "foo",
        val2: "bar"
      }
    }
  },
  ponents: {
    subComponent
  }
}

new Vue({
  el: "#app",
    ponents: {
    aComponent
  }
})

Here is a JSFiddle showing an object prop being mutated.

JSFiddle

If I'm passing (a reference to) an Object as a prop is it OK to mutate values in the prop?

I'm developing a web app which will require a lot of values to be passed to a ponent, and I'm trying to find the best way of passing the values to the ponent and back to the parent.

From everything I've read mutating a prop is the wrong way to do things, because next time the ponent is updated the values are passed back to the child ponent overwriting the mutations. But only the reference to the object is passed so any mutations to the values in the object prop happen to the original object in the parent ponent. Also Vuejs does not plain about mutating props when this happens.

const subComponent = {
    name: "subComponent",
  template: `
    <div>
        Sub Component Input
        <input type="text" v-model="objectProp.val1"></input>
    </div>`,
  props: {
    objectProp: {
      required: false,
      default: () => {return {val1: "carrot"}}
    }
  }
}

const aComponent = {
    name: "aComponent",
  template: `
    <div>
        val1: {{mainObject.val1}}
        val2: {{mainObject.val2}}
        <sub-ponent :objectProp="mainObject"></sub-ponent>
    </div>`,
  data: function() {
      return{
        mainObject: {
        val1: "foo",
        val2: "bar"
      }
    }
  },
  ponents: {
    subComponent
  }
}

new Vue({
  el: "#app",
    ponents: {
    aComponent
  }
})

Here is a JSFiddle showing an object prop being mutated.

JSFiddle

• javascript
• object
• vue.js
• dplyr
• prop

Share Improve this question Follow edited Oct 6, 2019 at 15:18 Dharman♦ 33.4k2727 gold badges101101 silver badges147147 bronze badges asked Sep 17, 2019 at 21:01 StivStiv 16333 silver badges99 bronze badges 3

• if it works, then it's fine, by definition. from what you describe, the mutation won't hurt anything. if you're using an immutable state strategy with something like flux, then you should follow that system's best practices, but there is no general javascript-wide rule about mutating certain states from one place. This is kind of off-topic as an opinion question. – dandavis Commented Sep 17, 2019 at 21:11
• It does not plain because the dev check does not test for deep changes, but the mutation is just as bad. – acdcjunior Commented Sep 17, 2019 at 21:15
• It sounds silly how everybody yelling "props mutation is bad, even on objects", but no one knows why, all the arguments they made is about primitive values only, it would be great if someone gives a real case of why mutation object props is bad, otherwise, I'll jump out of the box and say it is ok. – shamaseen Commented Nov 17, 2022 at 15:33

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Is mutating a prop bad practice?

Yes absolutely. In more plex applications it is very easy to lose track of where/what/why is mutated

What is the right way to handle state across different ponents?

In small projects you can really do whatever you want, because you will most likely be able to follow the logic - even after not looking at the project for a year. The possibilities include:

1. Mutating Props (ugly but will work)
2. Using Events to mutate state in parent ponents; take a look at the EventBus (better)
3. Use global shared state; look at Vuex (best, but a little more boilerplate)

In big projects, however, you should absolutely use Vuex. It is a module for Vue that adds global shared state to your app, which you can access and mutate from all places in your app.

I think I understand what you are trying to do, You want to pass data to a child ponent, mutate it and then give that data back to the parent ponent.

You never want to mutate the props data given to the child ponent, however you CAN mutate a local state of the data, which could be an exact clone of the prop.

You can do this in many ways, I normally use a puted property as suggested in the Vue documentation: https://v2.vuejs/v2/guide/ponents-props.html

in the puted return, just return the data ing in from the property.

本文标签： javascriptVuejs Mutating Object passed as a propStack Overflow