7 ms·
1. The MobX-like functionality is moreso simply a native feature of Vue. All data values are converted into observed values. A render is triggered by changes to
by alevans4 9y ago
1. The MobX-like functionality is moreso simply a native feature of Vue. All data values are converted into observed values. A render is triggered by changes to data. I believe Evan himself basically said React + MobX = Vue. Using a render function was just a choice. It could just as easily have been written with a template.
2. Again, this was basically just a choice for the example. The spinner could be defined in a module and imported/registered locally. Codepen/JSFiddle just isn't the greatest place for that kind of example.
3. Scoped slots are a way for a component to expose internal data to elements contained in a slot (content thats contained within the component but defined by it's parent). I agree, its initially one of the more confusing concepts in Vue.
- spion 9y agoOk I think I figured out how to use a template with a slot in the spinner component: <div> <img v-if="this.status == 'pending'" src="https://media.giphy.com/media/10kTz4r3ishQwU/giphy.gif" /> <slot v-if="this.status == 'success'" :list="this.data"></slot> <div v-if="this.status == 'error'">{{this.error}}</div> </div> Then in the template the option line becomes <option v-for="option in data.list" :value="option">{{option}}</option> Not too bad. Guess I'll have to come up with a new example of what Vue templates can't do now!
- alevans4 9y agoYou nailed it :) You could also destructure the passed properties in the scoped slot (scope="{list}") so you could just use "option in list".
- djur 9y agoI wonder if the JS snippets in those attributes is syntax checked at build time or run time.
- alevans4 9y agoVue templates are compiled into render functions. They are checked when the template is compiled. If you are using a build process, then that would be at build time.