Vue3 Composition API

深藏阁楼爱情的钟 2022-12-23 07:05 154阅读 0赞

**特性入口 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中与父组件通信的方法，可以直接拿来调用