Slide 1
Slide 1 text
Object-base
{{ count }} {{ double }}
export default {
data: function() { return { count: 0 } },
computed: {
double: function() {
return this.count * 2
}
},
methods: {
plus: function() {
this.count++
}
}
}
Slide 2
Slide 2 text
Composition
{{ state.count }} {{ state.double }}
import { reactive, computed } from 'vue'
export default {
setup() {
const state = reactive({
count: 0,
double: computed(() => state.count * 2)
})
function plus() {
state.count++
}
return { state, plus }
}
}
Slide 3
Slide 3 text
Class-base
{{ count }} {{ double }}
import Vue from 'vue'
export default class App extends Vue {
count = 0
get double() {
return this.count * 2
}
plus() {
this.count++
}
}
Slide 4
Slide 4 text
{{ count }} {{ double }}
export default {
data: function() { return { count: 0 } },
computed: {
double: function() {
return this.count * 2
}
},
methods: {
plus: function() {
this.count++
}
}
}
{{ count }} {{ double }}
import Vue from 'vue'
export default class App extends Vue {
count = 0
get double() {
return this.count * 2
}
plus() {
this.count++
}
}
{{ state.count }} {{ state.double }}
import { reactive, computed } from 'vue'
export default {
setup() {
const state = reactive({
count: 0,
double: computed(() => state.count * 2)
})
function plus() {
state.count++
}
return { state, plus }
}
}
Object-base
Class-base
Composition