Composion API
在进行组合式API讲解之前,需要对vue3的响应式升级有一些了解
vue2中我们通常会使用data(){return xx },那这里和vue3中的处理方法有什么区别呢?
vue2只能劫持对象下面的属性,你在data里面return的所有内容,在vue2中会挨个循环遍历,definepropty在做数据响应式的时候就已经有很多问题,在去对数组下标做响应的话,代码增加的非常多,并且性能会下降。
但是vue3升级了以后,使用的是ES6的proxy,它会自动帮你监听整个对象下的所有内容,不管是数组或者是对象,不需要循环,性能很高,不需要递归,监听数组的这个问题自然就解决了。
vue3监听数组:
<template>
<div v-for="(item,index) in list" :key="index">
<div>{{item.name}}</div>
</div>
<button @click="change">change</button>
</template>
<script>
export default {
data(){
return{
list:[{id:1,name:"name1-v3"},{id:2,name:"name2-v3"}]
}
},
methods:{
change(){
this.list[1].name ='name-change' //可以改变数组属性值,vue2在进行这一步的时候是不可以的
}
}
}
</script>
那么回归正题,组合式API应该怎么用呢?
首先这里有两个概念,一个是ref,一个是reactive
ref用来生成值类型(就是基本数据类型)的响应式对象
reactive用来给数组,对象添加响应式,下面是代码示例:
<template>
<button> addAge+nu : {{ nu }}</button>
<button>addAge+revData: {{revData.age}}</button>
</template>
<script>
import { ref,reactive } from 'vue' //引入ref和reactive
export default {
setup(){
const nu = ref(1) //这里声明一个变量用来接受值类型
const revData = reactive({ //这里声明一个响应式对象
name:"lili",
age:10,
hobbly:['足球','舞蹈']
})
return { nu,addAge } //在这里返回数据即可
}
}
</script>
那么如果想要对上述的对象或者值类型进行数据改变的话,直接声明函数,写入逻辑代码以后,在return即可,代码如下:
<template>
<button @click="addAgeNu"> addAge+nu : {{ nu }}</button>
<button @click="addAge">addAge+revData: {{ revData.age }}</button>
</template>
<script>
import { ref,reactive } from 'vue'
export default {
setup(){
const nu = ref(1)
const revData = reactive({
name:"lili",
age:10
})
function addAge(){
revData.age++
}
function addAgeNu(){
nu.value++
}
return { nu,addAge ,revData,addAgeNu }
}
}
</script>
那么这样做有什么好处呢?
在vue2的时候如果你的业务量多,那么我们中常常会需要在特定的区域(data,methods,watch,computed…)里面存放着各种各样的数据,那么如果你要去改一个值,由于相关业务的代码需要遵循option的配置写到特定的区域,那么需要你鼠标翻滚好多次,把这个业务代码改好,导致后续维护非常的复杂,代码可复用性也不高。
而用这个api是把全部放在setup里面了,就类似于函数式变成,把一块逻辑代码写在一个地方,对开发体验比较好,vue3支持以前的那种写法,代码逻辑更集中。