D7 - Functions and Methods
Methods in a Vue instance behave like normal JavaScript functions and are evaluated only when explicitly called.
Methods are functions that mutate state and trigger updates.// They can be bound as event listeners in templates.<script>export default { // Properties returned from data() become reactive state // and will be exposed on `this`. data() { return { count: 0 } }, // Methods are functions that mutate state and trigger updates. // They can be bound as event listeners in templates. methods: { increment() { this.count++ } }, // Lifecycle hooks are called at different stages // of a component's lifecycle. // This function will be called when the component is mounted. mounted() { console.log(`The initial count is ${this.count}.`) }}</script><template> <button @click="increment">Count is: {{ count }}</button></template>Functions - Composition api
They behave like normal JavaScript functions and are evaluated only when explicitly called. Functions that mutate state and trigger updates.
<script setup>import { ref, onMounted } from 'vue'// reactive stateconst count = ref(0)// functions that mutate state and trigger updatesfunction increment() { count.value++}// lifecycle hooksonMounted(() => { console.log(`The initial count is ${count.value}.`)})</script><template> <button @click="increment">Count is: {{ count }}</button></template>Computed properties
Computed Property in Vue3 is used to declaratively describe a value that is dependent on other values. This feature of VueJS allows for transformations or computations based on our data. We can reuse the result of these computations and transformations in our DOM template.
Computed properties remove the need for complex in-template expressions.
Table of Contents