Use Array/Object in props as default value

[butsalt]

Whether I can use Array/Object as default value in props setting?

{
    props: {
        arr: {
            type: Array,
            default: []
        }
    }
}

If i may, that will be a bug. Because every instance will share the same thing when I not passing target property to this component. Try this fiddle.

[yyx990803]

You can return the default value for a prop inside the data function as well:

data: function () {
  return {
    arr: []
  }
}

A warning seems necessary in the case you described. A solution would be:

props: {
  arr: {
    type: Array,
    default: function () { return [] }
  }
}

A little verbose, but better with ES6:

props: {
  arr: {
    type: Array,
    default: () => []
  }
}

[butsalt]

props: {
  arr: {
    type: Array,
    default: function () { return [] }
  }
}

That might not be a good idea. Because sometime I really need a function as my default value like:

props: {
  clickHandler: {
    type: Function,
    default: function () { alert("A bit confusing") }
  }
}

So format will might be confusing...

[butsalt]

Unless we can use function as factory except type===Function

[yyx990803]

That's quite obvious - you don't need to make a copy for functions.

[butsalt]

Great, thanks for your advise!

[jituanlin]

I know HOW, but WHY? Why vue.js must use factory function for instance default props?

[FyiurAmron]

@jituanlin I assume it's because while primitives can always be copied safely, it's quite possible that a shallow copy of Object/Array would simply not work. It's somewhat better to force an explicit factory f-n than to expect that the programmer would remember about this bit every time lest he bugs his code to hell with it...

[jituanlin]

@FyiurAmron Between freedom and risk, I choose freedom.

[FyiurAmron]

@jituanlin You get both in this case.

In general case I'd agree with you; still, notice that frameworks are used to reduce cognitive load and streamline functionalities. In this case (Array/Object props) it's similar to why data is a function in Vue: we have an explicit factory method that can be easily extended (or even replaced with a factory/singleton function completely external to a component or a regular utility function if you wish!), with 0 of the risk of having invalid forced copies of objects etc.

Also, in this case, there's very little (if any) freedom gained by forcing the framework to use an under-the-hood factory (cloning/copying) function, instead of simply allowing the programmer to do it himself explicitly. I'd even say that allowing you to provide a factory instead of just forcing you to provide a reference to an existing object actually increases your freedom, while at the same time reducing the risk here. In simplest case, it's 4 additional characters in ES6, so I think the cost is managable here chuckles.