[javascript] Default values for Vue component props & how to check if a user did not set the prop?

1. How can I set the default value for a component prop in Vue 2? For example, there is a simple movies component that can be used in this way:

<movies year="2016"><movies>



Vue.component('movies', {
    props: ['year'],

    template: '#movies-template',
    ...
}

But, if a user doesn't specify the year:

<movies></movies>

then the component will take some default value for the year prop.

2. Also, what is the best way to check if a user did not set the prop? Is this a good way:

if (this.year != null) {
    // do something
}

or maybe this:

if (!this.year) {
    // do something
}

?

Also something important to add here, in order to set default values for arrays and objects we must use the default function for props:

propE: {
      type: Object,
      // Object or array defaults must be returned from
      // a factory function
      default: function () {
        return { message: 'hello' }
      }
    },

This is an old question, but regarding the second part of the question - how can you check if the user set/didn't set a prop?

Inspecting this within the component, we have this.$options.propsData. If the prop is present here, the user has explicitly set it; default values aren't shown.

This is useful in cases where you can't really compare your value to its default, e.g. if the prop is a function.