【Vue3 入门到实战】2. OptionsAPI与CompositionAPI及setup
目录
1. 介绍
1.1 OptionsAPI
选项式 API 是 Vue 2 中的传统模式，并且在 Vue 3 中仍然得到支持。它通过在组件定义中使用选项（如data、methods、computed等）来组织代码。
下面的两张动态图可以很形象的阐明OptionsAPI的设计
Options API 的弊端
数据、方法、计算属性等，是分散在：`data`、`methods`、`computed`中的，若想新增或者修改一个需求，就需要分别修改：`data`、`methods`、`computed`，不便于维护和复用。
1.2 CompositionAPI
组合式 API 是 Vue 3 引入的新特性，它允许开发者以函数的形式编写可重用的逻辑片段，并将这些片段组合在一起。
设计原理以图形呈现
CompositionAPI的优势
可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起。
说明：以上四张动图的原创作责：大帅老猿
2. setup
2.1 setup 概述
setup 是 Vue3 中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台”，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在 setup 中。
2.2 setup 特点
- setup 函数返回的对象中的内容，可直接在模板中使用。
- setup 中访问 this 是 undefined。
- setup 函数会在 beforeCreate 之前调用，它是“领先”所有钩子执行的。
如下面代码所示
<template>
<div class="person">
<h3>我是Person组件</h3>
<h2>姓名：{{ name }}</h2>
<h2>年龄：{{ age }}</h2>
<button v-on:click="changeName">修改名字</button>
<button v-on:click="changeAge">修改年龄</button>
<button v-on:click="showTel">查看联系方式</button>
</div>
</template>
<script lang="ts">
export default {
name: 'Person',
setup() {
let name = '张三'
let age = 18
let tel = '123456'
function changeName() {
name = '李四'
console.log(name)
}
function changeAge() {
age += 1;
console.log(age)
}
function showTel() {
alert(tel)
console.log(tel)
}
return {name, age, changeName, changeAge, showTel}
},
}
</script>
<style>
.person {
background: blue;
padding: 20px;
}
button{
margin: 0 5px;
}
</style>2.3 setup 与OptionsAPI 的关系
(1) vue2的中的配置如 data、methods、computed中可以访问到 setup 中的属性、方法。
(2) 但在setup 中不能访问到 vue2 的配置如 data、methods、computed。
(3) 如果与 Vue2 冲突，则setup优先。
2.4 setup语法糖
有个语法糖，可以将 setup 独立出去。
代码如下
<template>
<div class="person">
<h3>我是Person组件</h3>
<h2>姓名：{{ name }}</h2>
<h2>年龄：{{ age }}</h2>
<button v-on:click="changeName">修改名字</button>
<button v-on:click="changeAge">修改年龄</button>
<button v-on:click="showTel">查看联系方式</button>
</div>
</template>
<script setup lang="ts">
let name = '张三'
let age = 18
let tel = '123456'
function changeName() {
name = '李四'
console.log(name)
}
function changeAge() {
age += 1;
console.log(age)
}
function showTel() {
alert(tel)
console.log(tel)
}
</script>
<style>
.person {
background: blue;
padding: 20px;
}
button{
margin: 0 5px;
}
</style>
3. 总结
本篇主要讲解选项式API和组合式API的区别，这部分更偏理论点，也是面试过程常考点。
更多vue3内容点击下方链接 ↓ ↓ ↓
原文地址：https://blog.csdn.net/qq_58195504/article/details/145157371
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！