组合式 API 和选项式 API的区别

devtools/2024/9/25 8:18:34/

一、区别

设计思想:options API 偏向于填充式,规定了方法应该写在那里,比如 methods,computed,watch 等,而 compositionAPI 更灵活

使用方式:compositionAPI 全部写在 setup()中更灵活强大,optionsAPI 更加简明,适用于构建简单的组件

二、选项式API

Vue 2 中广泛使用的选项式 API 

1、组成

  • data:用于定义组件的数据。
  • methods:定义组件的方法。
  • computed:定义计算属性。
  • watch:用于监听数据变化。
  • mounted等生命周期钩子:在特定的组件生命周期阶段执行代码。

2、实例代码

javascript">   export default {data() {return {message: 'Hello World',};},methods: {updateMessage() {this.message = 'New Message';},},computed: {reversedMessage() {return this.message.split('').reverse().join('');},},mounted() {console.log('Component mounted.');},};

三、组合式API

Vue 3 引入的组合式 API 提供了一种更加灵活和可维护的方式来组织组件逻辑。

1、特点

  • setup函数是入口点,在组件创建之前被调用。
  • 使用refreactive创建响应式数据。
  • 可以将相关的逻辑代码集中在一起,提高代码的可读性和可维护性。

2、实例代码

javascript">   import { ref, computed } from 'vue';export default {setup() {const message = ref('Hello World');const updateMessage = () => {message.value = 'New Message';};const reversedMessage = computed(() => message.value.split('').reverse().join(''));return {message,updateMessage,reversedMessage,};},};

http://www.ppmy.cn/devtools/116872.html

相关文章

JSP(Java Server Pages)基础使用二

简单练习在jsp页面上输出出乘法口诀表 既然大家都是来看这种代码的人了&#xff0c;那么这种输出乘法口诀表的这种简单算法肯定是难不住大家了&#xff0c;所以这次主要是来说jsp的使用格式问题。 <%--Created by IntelliJ IDEA.User: ***Date: 2024/7/18Time: 11:26To ch…

react hooks--useCallback

概述 useCallback缓存的是一个函数&#xff0c;主要用于性能优化!!! 基本用法 如何进行性能的优化呢&#xff1f; useCallback会返回一个函数的 memoized&#xff08;记忆的&#xff09; 值&#xff1b;在依赖不变的情况下&#xff0c;多次定义的时候&#xff0c;返回的值是…

DC-DC动态响应度的优化

DC-DC动态响应度的优化 以MP2315模块为例到底怎么样才能改变动态响应度呢&#xff1f;修改前馈电容修改电感也可以改善动态响应度 以MP2315模块为例 DC-DC输出位置再增加电容 从下面的波形图看出&#xff0c;多了一颗输出电容之后的结果&#xff0c;似乎有那么一点点作用但是…

风力发电机叶片表面缺陷识别检测数据集yolo数据集 共7000张

风力发电机叶片表面缺陷识别检测数据集yolo数据集 共7000张 风力发电机叶片表面缺陷识别数据集&#xff08;Wind Turbine Blade Defects Recognition Dataset, WTBDRD&#xff09; 摘要 WTBDRD 是一个专门为风力发电机叶片表面缺陷识别而设计的数据集&#xff0c;旨在为相关领…

智慧照明,安全度夏:揭秘如何前置防御暴雨中的路灯杆漏电隐患

随着夏季暴雨频发&#xff0c;多地近期发生的多起路人因路灯杆漏电触电身亡的悲剧&#xff0c;再次为公众安全敲响了警钟。从河南郑州到辽宁营口&#xff0c;一起起触目惊心的触电事故&#xff0c;不仅夺走了宝贵的生命&#xff0c;也引发了社会各界对暴雨天气下公共设施安全隐…

微服务架构---Ribbon\Feign

Ribbon(负载均衡) Ribbon概述 在 SpringCloud 中&#xff0c; Nacos⼀般配合Ribbon进行使用&#xff0c;Ribbon提供了客户端负载均衡的功能&#xff0c;Ribbon利用从Nacos中读取到的服务信息&#xff0c;在调用服务节点提供的服务时&#xff0c;会合理的进行负载。 Ribbon作…

耐人寻味:UTF-8的优缺点

Unicode的编码方式有三种&#xff1a;UTF-8、UTF-16、UTF-32&#xff0c;为什么只有UTF-8成为最耀眼的明星了呢&#xff1f; 首先说这三种编码的区别&#xff0c;8、16、32可看作每种编码存储字符所需的最少的位数。光从占用存储空间这一指标看&#xff0c;UTF-16、UTF-32就注…

shell脚本定时任务通知到钉钉

shell脚本定时任务通知到钉钉 1、背景 ​ 前两天看了一下定时任务&#xff0c;垃圾清理、日志相关、系统巡检这些&#xff0c;有的服务器运行就有问题&#xff0c;或者不运行&#xff0c;正好最近在做运维标准重制运维手册&#xff0c;顺便把自动化这块优化一下&#xff0c;所…