vue3升级部分（二）-composion API

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支持以前的那种写法，代码逻辑更集中。