[TOC]

原本vue2中data。methods等相互分类，不便于大型项目的维护，vue3中新增组合API，将业务数据和逻辑写到一个setup中，便于维护

一、使用案例

  1. 组合api基本使用 ```vue 


2. 相关功能模块的变量和方法单独定义到一个function中
```vue
<template>
  <form>
    <input type="text" v-model="state2.stu.id">
    <input type="text" v-model="state2.stu.name">
    <input type="text" v-model="state2.stu.age">
    <input type="submit" @click="addStu">
  </form>
  <ul>
    <li v-for="(stu, index) in state.stus" :key="stu.id" @click="removeStu(index)">姓名:{{ stu.name }}——年龄:{{
        stu.age
      }}
    </li>
  </ul>
</template>

<script>
// ref函数只能监听简单类型的变化，复杂类型（对象/数组）变化使用reactive
import {reactive} from 'vue'

export default {
  name: 'HelloWorld',
  // setup函数是组合API的入口函数
  setup() {
    // 组合API中引入相关变量和函数
    let {state, removeStu} = remStudent()
    let {state2, addStu} = addStudent(state)

    return {state, state2, removeStu, addStu}
  }
}

// 将模块功能定义到一个函数中
function remStudent() {
  let state = reactive({
    stus: [
      {id: 1, name: '张三', age: 10},
      {id: 2, name: '张四', age: 11},
      {id: 3, name: '张五', age: 12},
    ]
  })

  function removeStu(index) {
    state.stus = state.stus.filter((stu, idx) => idx !== index)
  }

  return {state, removeStu}
}

function addStudent(state) {
  let state2 = reactive({
    stu: {
      id: '',
      name: '',
      age: ''
    }
  })

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

  return {state2, addStu}
}
</script>
  • 如果多个文件公用这个方法，可以把function放到单独的文件中引用

    二、setup使用注意点

  1. 执行时机

beforeCreate——setup——Create

  1. 注意点
  • setup函数中无法使用this.data和this.methods(因为他们还没创建出来)
  • setup函数无法执行异步操作（async）

    三、reactive使用注意点

  1. reactive参数必须是对象、json、arr

  2. 如果给reactive传递其他对象，默认情况下修改对象，界面不会自动更新，想要更新，需要重新赋值的方式。

    四、ref使用注意点

  3. ref只能实现对简单值的监听

  4. template中使用ref的值不用通过value获取

  5. js中使用ref的值必须通过value获取

    五、非递归监听

  6. 默认情况下。ref和reactive都采用递归监听的方式，如果数据存在多层嵌套时，每层都要监听，性能消耗较大

  7. 可以import shallowReactive和shallowRef，使用非递归监听。shallowReactive只监听最外层数据,shallowRef只监听.value的变化
  8. 监听指定层数据的方法：triggerRef