Composition API之setup函数的基本使用

Composition API有一个强大的函数，那就是setup函数，以前在options API中我们是将一个功能的逻辑代码分散到每个属性中，现在有了setup函数，我们可以用它来替代之前所编写的大部分其他选项

setup函数

注意：setup函数中不能使用this，下面会有解释

1.setup函数有两个参数：

1.1 参数一（props）：

props其实就是父组件传递过来的属性会被放到props对象中，如果在setup中需要使用，那么我们就可以通过props对象来获取：

• 定义props的类型，和 options API的规则一样，在props选项中定义
• 在template中依然是可以正常去使用props中的属性

1.2 参数二（context）：

context里包含三个属性：attrs、slots、emit

• attrs：所有的非prop的attribute
• slots：父组件传递过来的插槽
• emit：当我们组件内部需要发出事件时会用到emit（注意不能通过 this.$emit发出事件，在  setup函数中没有this绑定，所以不能使用this）

代码示例：

<template>
  <div>
    <h2>{{ message }}</h2>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: "",
    },
  },
  // setup(props, context) {
  // context解构的写法
  setup(props, { attrs, slots, emit }) {
    console.log(props.message);
    console.log(attrs.id, attrs.class);
    console.log(slots);
    console.log(emit);
  },
};
</script>

2.setup函数的返回值

setup的返回值可以在模板template中被使用，其实我们可以理解成通过setup函数的返回值来替代data选项

代码示例：

<template>
  <div>
    <h2>{{title}}</h2>
    <h2>{{counter}}</h2>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
  export default {
    props: {
      message: {
        type: String,
        default: ""
      }
    },
    setup() {
      let counter = 100

      const increment = () => {
        counter++
      }

      return {
        title: "hello home",
        counter,
        increment
      }
    }
  }
</script>

但是，我们在increment进行加1操作的时候，counter并不会实现界面的响应式。那么需要使用两个函数来定义数据的响应式特性

3. Reactive 与 Ref

3.1 reactive API

如果想为在setup中定义的数据提供响应式的特性，那么我们可以使用reactive的函数，当我们使用reactive函数处理我们的数据之后，数据再次被使用时就会进行依赖收集，当数据发生改变时，所有收集到的依赖都是进行对应的响应式操作

setup() {
      const state = reactive({
        counter: 100
      })
      const increment = () => {
        state.counter++
        console.log(state.counter);
      }
      return {
        state,
        increment
      }
    }

3.2 Ref API

reactive API对传入的类型是有限制的，它要求我们必须传入的是一个对象或者数组类型。所以有另外一个Ref API ，它可以传入一个基本数据类型（String、Number、Boolean），ref会返回一个可响应对象

<template>
  <div>
    {{message}}
    <!-- 当我们在template模板中使用ref对象 它会自动进行解包 -->
    {{counter}} 
    <button @click="increment">+1</button>
  </div>
</template>

<script>

  import {ref} from "vue"

  export default {
    props: {
      message: {
        type: String,
        default: ""
      }
    },
    setup() {
      // 如果是基本数据类型 那么可以使用ref API
      // counter会生成一个可变的响应式对象
      let counter = ref(100)
      const increment = () => {
        // setup函数内部 依然是个ref对象 我们需要counter.value 取值操作
        counter.value++
        console.log(counter.value);
      }
      return {
        counter,
        increment
      }
    }
  }
</script>

注意：在模板中引入ref的值时，Vue会自动帮助我们进行解包操作，所以我们在template中不需要ref.value 的方式 来使用。但在setup函数内部，依然要用ref.value的方式使用。

4.setup不可以使用this

官网的描述：

this并没有指向当前组件实例，而且在setup被调用之前，data、computed、methods等都没有被解析