组合API

今天我们就看下vue3的组合API，首先我们用vue2来实现一个todolist

<template>
  <div class="page-wrapper">
    <ul>
      <li v-for="(item, index) in stus" @click="delStu(index)" :key="index">{{item.name}}--{{item.age}}</li>
    </ul>
    <div>
      <input v-model="stuModel.name">
      <input v-model="stuModel.age">
      <button @click="addStu">addStu</button>
    </div>
  </div>
</template>

<script lang="js">
export default defineComponent({
    name: 'vue2TodoList',
    data(){
        return{
            stus: [
                {
                    name: 'zs',
                    age: '18'
                },
                {
                    name: 'ls',
                     age: '19'
                },
                {
                    name: 'ww',
                    age: '20'
                }
            ],
            stuModel: {
                name: '',
                age: ''
            }
        }
    },
    methods: {
        addStu(){
            let newStu= Object.assign({}, this.stuModel);
            this.stus.push(newStu);
            this.stus.name= '';
            this.stus.age= '';
        },
        delStu(_index){
            this.stus= this.stus.filter((item, index)=> {
                return index !== _index;
            })
        }
    }
  
})
</script>

实现的功能如下图所示

vue2todolist.PNG

1）页面展示一个人员信息列表
2）点击列表行通过delStu删除当前点击的人员信息
3）通过下面的两个input框收集人员信息，点击addStu按钮之后，添加一条人员信息
vue2的简套路就是我们现在data中添加需要操作的数据，在methods.computed,wathch里面设置行为，这样的写法使得代码有一定的规范，但是同时也有一定的问题，那就是我们的数据和行为代码始终分离，当文件的代码越来越多，会变得难以维护，那下来我们再来看一下vue3可以怎么来实现这么一个功能

<template>
  <div class="page-wrapper">
    <ul>
      <li v-for="(item, index) in state.stus" @click="delStu(index)" :key="index">{{item.name}}--{{item.age}}</li>
    </ul>
    <div>
      <input v-model="stuModel.name">
      <input v-model="stuModel.age">
      <button @click="addStu">addStu</button>
    </div>
  </div>
</template>

<script lang="js">

//useAddStu
function useAddStu(state){
  let stuModel= reactive({
    name: '',
    age: ''
  })
  function addStu(){
    let newStu= Object.assign({}, stuModel);
    state.stus.push(newStu);
    stuModel.name= '';
    stuModel.age= '';
  }
  return [stuModel, addStu]
}

//useDelStu
function useDelStu(){
  let state= reactive({
    stus: [
      {
        name: 'zs',
        age: '18'
      },
      {
        name: 'ls',
        age: '19'
      },
      {
        name: 'ww',
        age: '20'
      }
    ]
  })

  function delStu(_index){
    state.stus= state.stus.filter((item, index)=> {
      return index !== _index;
    })
  }
  return [state, delStu]
}

import { defineComponent, reactive } from 'vue';
export default defineComponent({
  name: 'vue3ToList',
  setup(){
    const [ state, delStu ]= useDelStu();
    const [ stuModel, addStu ]= useAddStu(state);
    
    return {
      addStu,
      delStu,
      state,
      stuModel
    }
  }
})
</script>

我们封装了两个函数来完成添加和删除人员的功能，而且我们的数据始终和我们的行为在一起，当然你也可以提取文件，通过模块的方式进行引入

  //react hooks
  const [stuList, setstuList] = useState([]);

写过 react hooks的同学是不是觉得我上面的写法似曾相识，形成一个功能相对独立，加强代码的可维护性这个应该也是react hooks设计的时候考虑的因素之一。