1.选项式API
选项式API是一-种通过包含多个选项的对象来描述组件逻辑的API,其常用的选项包括data、methods、computed、watch等。其中,data用于定义数据,methods用于定义方法,computed用于定义计算属性,watch 用于定义侦听器。在组件的初始化阶段,Vue 内部会处理这此选项,把选项中定义的数据、方法、计算属性、侦听器等内容添加到组件实例上。当页面渲染完成后,通过this关键词可以访问组件实例。、
选项式API的语法格式如下
<script>
export default{
data(){
return{
//定义数据
}
},
methods:{
//定义方法
},
computed:{
//定义计算属性
},
watch:{
//定义侦听器
}
}
</script>
Vue提供的选项式API和组合式API这两种写法可以覆盖大部分的应用场景,它们是同一底层系统所提供的两套不同的接口。选项式API是在组合式API的基础上实现的。
企业在开发大型项目时,随着业务复杂度的增加,代码量会不断增加。如果使用选项式API,整个项目逻辑不易阅读和理解,而且查找对应功能的代码会存在一定难度。如果使用组合式API,可以将项目的每个功能的数据、方法放到一起,这样不管项目的大小,都可以快速定位到功能区域的相关代码,便于阅读和维护。同时,组合式API可以通过函数来实现高效的逻辑复用,这种形式更加自由,需要开发者有较强的代码组织能力和拆分逻辑能力。
接下来通过实际操作演示选项式API和组合式API的使用方法,具体步骤如下。
1.打开命令提示符,切换到D:vuelchapter03目录,在该目录下执行如下命令,创建项目
yarn create vite component_basis --template vue
cd component _basis
yarn
yarn dev
项目启动后,可以使用URL地址http://127.0.0.1:5173/进行访问。
2.使用VS Code 编辑器打开D:lvuelchapter03\component_basis目录。
3.将 srclstyle.css 文件中的样式代码全部删除,从而避免项目创建时自带的样式代码影响本案例的实现效果。
4.创建 srclcomponents\OptionsAPl.vue 文件,用于演示选项式API的写法,在该文件中
实现单击“+1”按钮使数字加1的效果,具体代码如下。
<template>
<div>数字:(( number }}</div>
<button @click="addNumber">+1</button>
</template>
<script>
export default {
data(){
return{
number: 1
}
},
methods:{
addNumber() {
this.number++
}
}
}
</script>