Skip to content

Enable to collect inital class properties as vue instance data #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Nov 13, 2016
Merged

Enable to collect inital class properties as vue instance data #29

merged 5 commits into from
Nov 13, 2016

Conversation

ktsn
Copy link
Member

@ktsn ktsn commented Nov 12, 2016

This PR enable to declare initial data as class properties for components. This let us define Vue component more native class-like style.

Example:

@Component({
  props: ['foo']
})
class MyComp extends Vue {
  bar = 123
  baz = this.foo
}

...will be converted into:

{
  props: ['foo'],
  data () {
    return {
      bar: 123,
      baz: this.foo
    }
  }
}


// proxy to each prop values
const propKeys = Object.keys(vm.$options.props || {})
propKeys.forEach(key => {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I found this approach is problematic when users define new properties in custom beforeCreate lifecycle hooks. Here it only collects props and custom properties get lost.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for your review! I'm thinking this problem but maybe we can solve this by using vm as the prototype for data instead of Component.prototype?


// create plain data object
const plainData = {}
Object.keys(data).forEach(key => {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rather than whitelisting props above, it might be better to blacklist property keys which should not be collected.

@ktsn
Copy link
Member Author

ktsn commented Nov 13, 2016

Fixed the dummy instance's prototype to actual vm. The dummy should have props and other properties defined in beforeCreate.

@yyx990803
Copy link
Member

That's smart. I wanted to do this in the original version!

@yyx990803 yyx990803 merged commit c14d73e into vuejs:master Nov 13, 2016
@michaelkrupp
Copy link

michaelkrupp commented Nov 13, 2016

@ktsn any idea on when this will be updated on NPM?

@ktsn ktsn deleted the class-property-to-data branch November 14, 2016 00:20
@ktsn
Copy link
Member Author

ktsn commented Nov 14, 2016

@michaelkrupp Maybe after #30 is merged?

@ktsn
Copy link
Member Author

ktsn commented Nov 14, 2016

I noticed this causes error if it is used with Babel because the dummy object does not inherit component class constructor.
I'll fix it ASAP.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants