关于vue3的两种API写法——选项API和组合API

理解什么是选项API写法，什么是组合API写法

Options API

什么是选项API写法:Options API

在vue2.x项目中使用的就是选项API写法

代码风格：data选项写数据，methods选项写函数...，一个功能逻辑的代码分散

优点：易于学习和使用，写代码的位置已经约定好

缺点：代码组织性差，相似的逻辑代码不便于复用，逻辑复杂代码多了不好阅读

补充：虽然提供mixins用来封装逻辑，但是出现数据函数覆盖的概率很大，不好维护
<template><div class="container"><div>鼠标位置：</div><div>X轴：{{x}}</div><div>Y轴：{{y}}</div><hr><div>{{count}} <button @click="add()">自增</button></div>  </div>
</template>
<script>
export default {name: 'App',data () {return {x: 0,y: 0,count: 0}},mounted() {document.addEventListener('mousemove', this.move)},methods: {move(e) {this.x = e.pageXthis.y = e.pageY},add () {this.count++}    },destroyed() {document.removeEventListener('mousemove', this.move)}
}
</script>
Compositon API

什么是组合API写法：Composition API

咱们在vue3.0项目中将会使用组合API写法

代码风格：一个功能逻辑的代码组织在一起（包含数据，函数...）

优点：功能逻辑复杂繁多情况下，各个功能逻辑代码组织再一起，便于阅读和维护

缺点：需要有良好的代码组织能力和拆分逻辑能力

补充：为了能让大家较好的过渡到vue3.0的版本来，也支持vue2.x选项API写法
<template><div class="container"><div>鼠标位置：</div><div>X轴：{{x}}</div><div>Y轴：{{y}}</div><hr><div>{{count}} <button @click="add()">自增</button></div>  </div>
</template>
<script>
import { onMounted, onUnmounted, reactive, ref, toRefs } from 'vue'
export default {name: 'App',setup () {// 鼠标移动逻辑const mouse = reactive({x: 0,y: 0})const move = e => {mouse.x = e.pageXmouse.y = e.pageY}onMounted(()=>{document.addEventListener('mousemove',move)})onUnmounted(()=>{document.removeEventListener('mousemove',move)})// 累加逻辑const count = ref(0)const add = () => {count.value ++ }// 返回数据return {...toRefs(mouse),count,add}}
}
</script>

关于vue3的两种API写法——选项API和组合API相关推荐

python 字符编码的两种方式写法:# coding=utf-8和# -*- coding:utf-8 -*-
python运行文件是总会出现乱码问题,为了解决这个问题,在文件开头加上: # coding=utf-8 或者 # -*- coding:utf-8 -*- # coding=<encodin ...
mysql写什么不同_mysql - 编译配置PHP时，两种配置写法有什么不同
在编译PHP时, --with-扩展库=DIR --enable-扩展库这两种配置有什么不同回复内容: 在编译PHP时, --with-扩展库=DIR --enable-扩展库这两种配置有什么不 ...
关于两种指针写法： int* ptr 与 int *ptr的区别
两种定义方法在使用的结果上没有区别,只是所表达的含义有所不同. int* ptr 强调 int* 是一种类型----指向int的指针.符合C++编程的习惯. int *ptr 强调的是 *ptr ...
将json转为map的两种方式及前后端开发json Api设计规范总结
一.使用jackson String jsonData = "{\"identifier\":\"18111111111\",\"opTyp ...
spark从hbase读数据到存入hbase数据两种版本写法
spark2版本: object SparkCoreTest {def main(args: Array[String]): Unit = {// 使用sparksession来创建对象val spa ...
Android获取天气预报的两种方式（国家气象局和中央气象台天气预报API）
转自:[url]http://blog.csdn.net/aboy123/article/details/9227191[/url]
在PHP中数组有两种形式区别,PHP三种数组合并方式区别示例
PHP三种数组合并方式区别示例 PHP数组合并方式主要有三种: 1.+操作符 2.array_merge() 3.array_merge_recursive() 它们的区别主要体现在对于相同键名(数字 ...
iOS开发笔记－两种单例模式的写法
iOS开发笔记-两种单例模式的写法单例模式是开发中最常用的写法之一,iOS的单例模式有两种官方写法,如下: 不使用GCD #import "ServiceManager.h"st ...
python基本判断语句_python两种简洁的条件判断语句写法
了Python返回真假值(True or False)小技巧,本文探讨的是最简洁的条件判断语句写法,本文给出了两种简洁写法,需要的朋友可以参考下如下一段代码:def isLen(strString) ...

关于vue3的两种API写法——选项API和组合API

理解什么是选项API写法，什么是组合API写法

Options API

Compositon API

关于vue3的两种API写法——选项API和组合API相关推荐

最新文章

热门文章