My take on https://github.com/webfansplz/vuejs-challenges
Problems list:
- Hello World
- Optimize Perf Directive
- Dom Portal
- Dynamic CSS value
- Ref Family
- Prevent event propagation
- Global CSS
- Capitalize
- Prop Validation
- Dependency Injection
- Next DOM update
Summary
- Hello World: Basic data binding (string interpolation)
- Optimize Perf Directive: v-once
- Dom Portal:
- Dynamic CSS value: v-bind in <style></style>
- Ref Family: toRef(), isRef(), unRef()
- Prevent event propagation: @click.stop
- Global CSS: :global or <style> tag without "scoped"
- Capitalize: v-model.capitalize (custom modifiers with modelValue, update:modelValue and modelModifiers)
- Prop Validation: using validator in defineProps
- Dependency Injection: provide/ inject for avoiding prop drill
- Next DOM update: nextTick()
- Writable Computed: computed that can be reassigned value through getter/setter function
- Shallow Ref: using shallowRef() api
- Watch family: stop a watch - allow trigger once only/ deep watcher/ flush: "post"