A Vue things you should know

Tipps, Tricks and personal best practises with the VueJS Framework

Transcript

1. April 27, 2018 A VUE THINGS 
 YOU SHOULD KNOW
2. WHO AM I Frank Jogeleit Backend Engineer @LOVOO GmbH Responsible for PHP, GO and NodeJS You find my on: • Twitter: @FrankJogeleit • Github: https://github.com/fjogeleit
3. V-MODEL EXPLAINED
4. IMPROVE YOUR COMPONENTS v-model explained v-model is the (or one?) way to go for
 two-way-binding in vue Internal v-model is not more then a shortcut. If you are using it its not more then a other way to write: • v-bind:value’’value’’ • v-on:input=’’$emit(’’emit’’, $event)’’ With this behavior in mind its very easy to implement
 v-model in your own custom components and simplify your API for two-way-binding
5. WHEN V-MODEL IS NOT ENOUGH THE SYNC MODIFIER
6. WHEN V-MODEL IS NOT ENOUGH Prop.sync Yes, there is an alternative to v-model and it is a modifier that makes a normal prop reactive and ready for two way binding The sync modifier works very close to v-model. But its only a modifier and not a standalone property, so you can use it as often as you want in one component. To implement the sync modifier for a property you need: • To define the property as component property • To emit an event with a name-schema of ’’update:property’’ to change the value in the parent component
7. SMARTER WATCHERS
8. Smarter Watchers • Fetch user when the component are created • Fetch user when the ID in the URL has changed
 • handler accepts strings which represent a method to execute when the value changed
 • immediate: true executes the watcher on component creation so no created hook is needed
9. RERENDER BEHAVIOR VUE ROUTER
10. THE PROBLEM WITH Vue Router • If your are using a parameter based route and the parameter changes. Vue Router doesn’t re-render the component from scratch
 • Whats needed are helper methods to reset state and refetch data
11. THE SOLUTION FOR Vue Router • A key property on router-view that changes with every parameter change like the $route.fullPath value force a completely re-render of the viewed component.
 • So reset of the view is not needed and the code is much smaller
12. WRAP COMPONENTS THE EASY WAY
13. THE PROBLEM WITH WrapComponents • Common example are form fields • Label Translation • Basic Validation • Selects with API based Options • Problems • Passing all needed events and props to the wrapped component • Passing events and props to multiple Childs if you are using v-if to render different components
14. THE SOLUTION FOR PROPERTIES WrapComponents • $attrs is available in each component and includes all properties as object which are passed but not defined as props • v-bind can also be used as standalone property in the template to pass an object as key value pairs as props to another component • Its also possible to pass props to multiple or nested child components • inheritAttrs control the default behavior to pass unknown props to the first child
15. THE SOLUTION FOR LISTENERS WrapComponents • $listeners works like $attrs and store all not defined events which are not defined as object • v-on is the analogical for v-bind for listeners and used to pass not defined listeners to another component
16. THE POWER OF
 COMPUTED PROPERTIES
17. SIMPLIFY V-MODEL / SYNC USAGE WITH Computed Properties Computed properties can be split into a set and get method. So its possible to use the get method to return a property and the set method to emit the event to change it on the parent component It gives you the possibility to simply use v-model or the sync modifier on your internal components instead of handling the event emitting and value property by its own Attention: computed property set only works for scalar values like String, Number or Boolean. For Objects or Arrays you could use a watcher with the deep option instead of a setter method
18. VUEX BEST FRIEND ARE Computed Properties Like the v-model example its also possible to combine vex getter and mutation to an internal computed property and make it easy to manipulate the vex state
19. VUEX BEST FRIEND ARE Computed Properties Computed properties also in use, if my vuex getter method is a function and filter or search in a list of values. Every time the parameter changes the search will be repeated and the new value(s) will be rendered
20. FOR WEBPACK LOVERS DYNAMIC IMPORTS
21. FOR WEBPACK LOVERS DYNAMIC IMPORTS Frontend logic grows and with this logic also the size of JavaScript, Assets, CSS and so on. To ensure a good user experience its important to load your App as soon as possible. To improve this behavior its recommended to only load the code that is really needed. To make this possible there is a functional import which is the default in newer Vue Application in the router definition, to load only needed „pages“ at the point of start. But the usage of import is not restricted to the router. It is possible to replace each Component static import with this kind of „dynamic“ imports, handled by webpack. With import the component code is lazy loaded if when needed.
22. STATE MANAGEMENT WORKING WITH API
23. STATE MANAGEMENT API handling The most frontends are working with APIs to process data. To have all you need in one place and don’’t repeat the code for different endpoints you can implement all your calls as vuex actions. • vuex already knows how your state looks like and should be able to receive the data that it stores • All API related functionality is in one place and can separate per context as vuex module • implement your action names as constants, so you are safe for misspells • actions should not return any response, commit data to your state and use getters to load your state into components
24. ANY Questions?