Skip to content

Latest commit

 

History

History
39 lines (30 loc) · 3.02 KB

File metadata and controls

39 lines (30 loc) · 3.02 KB

Simple Vue hard #this #application #vue

by Anthony Fu @antfu

Take the Challenge    简体中文 日本語

Implement a simpiled version of a Vue-like typing support.

By providing a function name SimpleVue (similar to Vue.extend or defineComponent), it should properly infer the this type inside computed and methods.

In this challenge, we assume that SimpleVue take an Object with data, computed and methods fields as it's only argument,

  • data is a simple function that returns an object that exposes the context this, but you won't be accessible to other computed values or methods.

  • computed is an Object of functions that take the context as this, doing some calculation and returns the result. The computed results should be exposed to the context as the plain return values instead of functions.

  • methods is an Object of functions that take the context as this as well. Methods can access the fields exposed by data, computed as well as other methods. The different between computed is that methods exposed as functions as-is.

The type of SimpleVue's return value can be arbitrary.

const instance = SimpleVue({
  data() {
    return {
      firstname: 'Type',
      lastname: 'Challenges',
      amount: 10,
    }
  },
  computed: {
    fullname() {
      return this.firstname + ' ' + this.lastname
    }
  },
  methods: {
    hi() {
      alert(this.fullname.toLowerCase())
    }
  }
})

Back Share your Solutions Check out Solutions

Related Challenges

213・Vue Basic Props