1.选项式api(Options API)
组合式api这个概念是在Vue3.0引出的,为了更好的理解,我们需要先了解Vue3.0前我们使用的选项式api。
- 其在vue2.x项目中使用的就是选项API写法
- 代码风格:data选项写数据,methods选项写函数...,一个功能逻辑的代码分散
- 优点:易于学习和使用,写代码的位置已经约定好
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>姓名案例,watch实现</title>
<!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<style>
* {
margin: top 20px;
}
</style>
<!-- v-model页面上的输入影响数据的输入 -->
<body>
<div id="root">
姓:<input type="text" v-model:value="firstname" /><br />
名:<input type="text" v-model="lastname" /><br />
全名:<span>{{fullName}}</span><br />
</div>
</body>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: "#root",
data: {
firstname: "张",
lastname: "三",
// 存在vm自身_data
fullName: "张-三",
},
watch: {
firstname(newValue) {
// 他不是Vue管理的函数
setTimeout(() => {
this.fullName = newValue + "-" + this.lastname;
}, 1000);
},
// 计算属性vs监听属性
// 监听非常容易开启异步任务
//(不被vue所管理的,定时器回调函数,ajax回调函数,promise回调函数)最好写成箭头函数,这样this的指向才是vm或组件实例对象
lastname(newValue) {
setTimeout(() => {
this.fullName = this.firstname + "-" + newValue;
}, 1000);
},
},
});
</script>
</html>
对于某个功能的实现,咱们就需要分别在各个部分分别进行操作,一般都是data中定义一些初始化数据,method里在写一些方法,在watch监听一下数据变化。那这样的话是不是说我们的业务是不是分散到各个option这个选项中了。当功能少的时候还好,但功能一多业务一多就会发现,日后你想修改代码或者添加某个逻辑的功能时候,由于零散的原因就找起来代码来就特别的累。
- 缺点:代码组织性差,相似的逻辑代码不便于复用,逻辑复杂代码多了不好阅读
- 补充:虽然提供mixins用来封装逻辑,但是出现数据函数覆盖的概率很大,不好维护
由此引出了另一种代码风格
2.组合式api(Compositon API)
咱们在vue3.0项目中将会使用组合API写法
- 代码风格:一个功能逻辑的代码组织在一起(包含数据,函数...)
- 优点:功能逻辑复杂繁多情况下,各个功能逻辑代码组织再一起,便于阅读和维护
setup(){
const testName = reactive({
firstName: '江',
lastName: '正阳',
})
// 通过计算属性
const fullName = computed(() => {
return testName.firstName + '-' + testName.lastName
})
watchEffect(() => {
const names = input4.value.split('-')
testName.firstName = names[0]
testName.lastName = names[1]
})
}
- 组合式API通过
setup(){}
选项暴露,该选项函数返回值可以在模板和实例中被访问 - 组合式API可以理解为关注点抽离的入口,我们可以把之前分散在各个选项data,computed,watch,methods,mouted的功能代码抽离到setup里面,然后暴露出来
- 组合式API可以抽离代码,意味着setup就不把data,computed,watch,methods,mouted这些功能作为选项了,但是如何实现与这些选项相匹配的功能呢?vue3为此暴露了与之匹配的ref,reactive,computed,watch,watchEffect等方法以及onMounted等生命周期
- 利用ref,reactive,computed等接口可以把之前分散在各个选项的逻辑功能块组合到一起,也就是,我们把之前分散的关注点抽离到一个代码块了,实现了关注点抽离