vue-example

Transcript

1. Object-base <template> <div @click="plus">{{ count }} {{ double }}</div> </template> <script> export default { data: function() { return { count: 0 } }, computed: { double: function() { return this.count * 2 } }, methods: { plus: function() { this.count++ } } } </script>
2. Composition <template> <div @click="plus">{{ state.count }} {{ state.double }}</div> </template> <script> 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 } } } </script>
3. Class-base <template> <div @click="plus">{{ count }} {{ double }}</div> </template> <script> import Vue from 'vue' export default class App extends Vue { count = 0 get double() { return this.count * 2 } plus() { this.count++ } } </script>
4. <template> <div @click="plus">{{ count }} {{ double }}</div> </template> <script> export default { data: function() { return { count: 0 } }, computed: { double: function() { return this.count * 2 } }, methods: { plus: function() { this.count++ } } } </script> <template> <div @click="plus">{{ count }} {{ double }}</div> </template> <script> import Vue from 'vue' export default class App extends Vue { count = 0 get double() { return this.count * 2 } plus() { this.count++ } } </script> <template> <div @click="plus">{{ state.count }} {{ state.double }}</div> </template> <script> 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 } } } </script> Object-base Class-base Composition