Composition API中setup使用

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

一 初始

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

<template>
  <input v-model="state2.info.id" />
  <input v-model="state2.info.name" />
  <input v-model="state2.info.age" />
  <button @click="addStu">添加</button>
  <div v-for="(item, index) in state.stus" :key="index" @click="remStu(index)" style="margin-top:20px; cursor:pointer">
    {
   
   {item.name}} --- {
   
   {item.age}}
  </div>
</template>

<script>
import { reactive } from  'vue' //首先要引入reactive
export default {
  setup() {
    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)
    }//点击行删除

    let state2 = reactive({
      info: {
        id: null,
        name: null,
        age: null
      }
    })
    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, remStu, state2, addStu } //必须要把数据return出去
  },
}

</script>

二 整理

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

<template>
  <input v-model="state2.info.id" />
  <input v-model="state2.info.name" />
  <input v-model="state2.info.age" />
  <button @click="addStu">添加</button>
  <div v-for="(item, index) in state.stus" :key="index" @click="remStu(index)" style="margin-top:20px; cursor:pointer">
    {
   
   {item.name}} --- {
   
   {item.age}}
  </div>
</template>

<script>
import { reactive } from  'vue'
export default {
  setup() {
    let { state, remStu } = useRemove()
    let { state2, addStu } = useAddStu(state)
    return { state, remStu, state2, addStu }
  },
}

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 { state2, addStu }
}

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 }
}
</script>

三 升级

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

<template>
  <input v-model="state2.info.id" />
  <input v-model="state2.info.name" />
  <input v-model="state2.info.age" />
  <button @click="addStu">添加</button>
  <div v-for="(item, index) in state.stus" :key="index" @click="remStu(index)" style="margin-top:20px; cursor:pointer">
    {
   
   {item.name}} --- {
   
   {item.age}}
  </div>
</template>

<script>
import { useRemove, useAddStu } from './HelloWorld'
export default {
  setup() {
    let { state, remStu } = useRemove()
    let { state2, addStu } = useAddStu(state)
    return { state, remStu, state2, addStu }
  },
}
</script>

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/