Vue3 Composition API

特性入口 setup()，

说明：可以看作是一个生命周期，介于 beforeCreate 与 created 之间，新的 setup 组件选项在创建组件之前执行，一旦 props 被解析，并充当合成 API 的入口点

Vue2.x

<template>
    <div>
        <div>{{ count }}</div>
        <button @click="add">增加</button>
    </div>
</template>

<script>
    export default {
        name: "demo",
        data() {
            return {
                count: 0
            }
        },
        methods: {
            add() {
                this.count ++
            }
        }
    }
</script>

说明：count、add()分开不利维护

Vue3.x

<template>

  <div>
      <div>{{ count }}</div>
      <button @click="add">增加</button>
  </div>

</template>

<script>
// 导入ref函数
import {ref} from 'vue'

function increase() {
 // 声明响应式数据count，值为0
    const count = ref(0)
    // 创建方法add
    const add = () => {
        count.value ++
    }
    // 导出数据和方法，便于外界访问
    return {
        count,
        add
    }
}

export default {
  name: 'demo',
  setup() {
     //调用increase函数，并获取 count 和 add
      let {count, add} = increase()
      
      //return出需要被访问的值和方法
      return {
          count,
          add
      }
  }
}
</script>

说明：模块组件化，count、add()在一个方法里，便于维护。ref()函数来命名响应式数据的，ref 对我们的值创建了一个响应式引用。使用引用的概念将在整个组合式 API 中经常使用

在介绍 setup 函数时，我们使用了 ref 函数包装了一个响应式的数据对象，这里表面上看上去跟 reactive 好像功能一模一样啊，确实差不多，因为 ref 就是通过 reactive 包装了一个对象，然后是将值传给该对象中的 value 属性，这也就解释了为什么每次访问时我们都需要加上 .value

我们可以简单地把 ref(obj) 理解为这个样子 reactive({value: obj})

在Vue2中，我们访问 data 或 props 中的变量，都是通过类似 this.number 这样的形式去获取的，但要特别注意的是，在setup中，this 指向的是 undefined，也就是说不能再向Vue2一样通过 this 去获取变量了

那么到底该如何获取到 props 中的数据呢？

其实 setup 函数还有两个参数，分别是 props 、context，前者存储着定义当前组件允许外界传递过来的参数名称以及对应的值；后者是一个上下文对象，能从中访问到 attr 、emit 、slots

其中 emit 就是我们熟悉的Vue2中与父组件通信的方法，可以直接拿来调用