Composition API中setup使用

3.0正式发版了，先尝鲜一波写了一个小demo

一 初始

逻辑很简单就是一个新增和删除方法，vue3.0是兼容2.0的所以很多语法还是不变的，这个是最初方法，把所有的逻辑都写在setup里面，这个时候其实会疑惑这样写逻辑太多怎么办，所以就有了进化版本。看到引入reactive这个时候，感觉后面应该会有react的味道，后面整理我感觉还是有点意思的。

二 整理

这时候把方法从setup里面抽离出去，看到这里时候感觉有那味道了，这个时候感觉舒服多了也很熟悉了，把方法抽离出去每个逻辑在自己的方法内执行，有点意思，到了下面还有更6的操作。

三 升级

最6的操作来了，感觉舒服了

HelloWorld.js

import { reactive } from  'vue'

export function useAddStu(state) {
  let state2 = reactive({
    info: {
      id: '',
      name: '',
      age: ''
    }
  })

  function addStu(e) {
    e.preventDefault()
    const stu = Object.assign({}, state2.info)
    state.stus.push(stu)
    state2.info.id = ''
    state2.info.name = ''
    state2.info.age = ''
  }
  return {state, state2, addStu }
}

export function useRemove() {
  let state = reactive({
    stus: [
      {id: 1, name: '1s', age: 10},
      {id: 2, name: '2s', age: 20},
      {id: 3, name: '3s', age: 30},
    ]
  })
  function remStu(index) {
    state.stus = state.stus.filter((stu, idx) => idx != index)
  }
  return { state, remStu }
}

写至此感觉舒服了，就我目前菜鸟技术我觉得这里解决了我之前在项目中data里面每次会建一大堆变量，然后this来this去的问题，现在新建的变量可以知道哪个方法里面用，可以从哪个方法引，怎么去传值，最后一个HelloWorld.js中两个方法其实可以写成两个方法，单独引用都可以。

总体感觉，新的api引入会将以后开发逻辑整理的更加清晰，期待后续v3的完善

以上代码仅个人学习demo，具体的api可以参考https://composition-api.vuejs.org/#api-introduction

还有一个vue3，https://vue-next-template-explorer.netlify.app/