vue3选项式api与组合式api

选项式api

选项式api就是用包含多个选项的对象来描述组件的逻辑，比收说，datat，methods，mounted，updated等等。在这些选项内定义的属性都会暴露在函数内部的this上，其中的this会指向组件实例。

<template><button @click="add">Count is: {{ count }}</button></template><script>export default {// data() 返回的属性将会成为响应式的状态// 并且暴露在 `this` 上data() {return {count: 0}},// methods 是一些用来更改状态与触发更新的函数// 它们可以在模板中作为事件监听器绑定methods: {add() {this.count++}},mounted() {console.log(`count 的值为 ${this.count}.`)}}</script>

组合式api

组合式api与选项式api不同，他通常会跟<script setup>一起搭配使用，并且组合式api的可复用性比选项式api要好很多，所以，组合式api适合使用在那些大型项目中，代码的灵活性也比较高，而选项式api对于初学者来说更加友好，在做一些小型项目是，还个人感觉还是选择选项式api比较好。

<template><button @click="add">Count is: {{ count }}</button></template><script setup>import { ref, onMounted } from 'vue'// 响应式状态const count = ref(0)// 用来修改状态、触发更新的函数function add() {count.value++}// 生命周期钩子onMounted(() => {console.log(`Tcount 的值是 ${count.value}.`)})</script>

如果觉得《vue3选项式api与组合式api》对你有帮助，请点赞、收藏，并留下你的观点哦！