Vue this inside data() factory function

Question

Can I rely on this used inside data factory function as it was current component object instance? I couldn't find in docs what this is in data().

data() {
  return {
    results: [],
    apiResource: this.$resource('url...'), // <-- this used here
    loading: true,
  }
},

Simple test shows that this is VueComponent instance here, but the question is if the framework allows using it this way.

Answer 1

Yes, you can rely on this in the data factory function pointing to the component, depending on how you define the function. It's the primary way of initializing local data with values from properties, for example.

props:["value"],
data(){
    return {
         localValue: this.value
    } 
}

If, however, you defined your data function with an arrow function, this will not be the component.

props:["value"],
data: () => { 
    // 'this' is NOT the component 
    return { 
        localValue: this.value // results in undefined
    } 
}