A Full Day of Vue.js
Extras (Vue 3.0)
Vue 3.0?!
When ? | What ? | Where ?
Vue 2.0 came out more than two years ago
Vue 3.0 is currently in the prototyping phase
Class-Based Components?
interface HelloProps {
text: string
}
class Hello extends Component<HelloProps> {
count = 0
render() {
return <div>
{this.count}
{this.$props.text}
</div>
}
}Class-based component proposal has been dropped
Current proposal - Composition API
Composition API
A set of additive, function-based APIs that allow flexible composition of component logic.
<template>
<button @click="increment">
Count is: {{ state.count }}, double is: {{ state.double }}
</button>
</template>
<script>
import { reactive, computed } from 'vue'
export default {
setup() {
const state = reactive({
count: 0,
double: computed(() => state.count * 2)
})
function increment() {
state.count++
}
return {
state,
increment
}
}
}
</script>Goals
1. Better logic reuse and code reorganization
2. Better Type Inference
- All old "options" syntax will remain valid!
- The RFC is not final and still in the proposal stage.
- Template syntax will largely remain the same.
errr...... so when?
2020?
Thank you!!
Resources
Code Samples | Codepen & CodeSandbox Links
for this workshop
🤩
Web Unleashed Discount
https://gumroad.com/l/vue-full/webu19
A Full Day of Vue.js Workshop - Extras (Day 1 & 2)!
By djirdehh
