Vue3中的Composition-Api

本文将介绍Vue3中的新增杀器 —— Composition API : 一组低侵入式的、函数式的 API，它使我们能够更灵活地「组合」组件的逻辑。

如上图，在较大组件的编写中， Composition-Api 可以把复杂组件的逻辑抽地更紧凑，而且可以将公共逻辑进行抽取。

 setup 它为基于 Composition API 的新特性提供了统一的入口。

Composition-Api

1.reactive()

reactive() 函数接收一个普通的对象，返回出一个响应式对象。

在Vue2.x的版本中，我们只需要在 data() 中定义一个数据就能将它变为响应式数据，在 Vue3.0 中，需要用 reactive 函数或者 ref 来创建响应式数据。

// 在组件库中引入 reactive
import { reactive } from 'vue'

setup() {
    // 创建响应式对象
    const state = reactive({
        count:0
    });

    // 将响应式对象return出去，暴露给模板使用
    return state;
}

• 使用响应式对象

<template>
	  <p>当前的count的值为：{{ data.count }}</p>
	  <button @click="data.count++">点击增加count</button>
</template>

2.ref

ref() 函数可以根据给定的值来创建一个响应式的数据对象，返回值是一个对象，且只包含一个 .value 属性。

// 引入 ref
import { ref } from "vue";

setup() {
    // 创建响应式对象
    const count = ref(0);

    return {
        count
    }
}

• 使用响应式对象

<template>
	  <p>当前的count的值为：{{ count }}</p>
	  <button @click="count++">点击增加count</button>
</template>

• 注意事项
  1.在 setup 函数内使用ref后返回的是一个 RefImpl 的对象 ， 需要使用 .value 访问

  	  // 使用ref
  	    let count = ref(0); 
  	    // 获取count的值 --- 函数内部
  	    console.log(count.value);   //0
  

  在模板上直接使用 count 访问即可

  2.可以在 reactive 对象中访问 ref() 函数创建的响应式数据。

  3.新的 ref() 会覆盖旧的 ref() 。

3. computed()

computed() 用来创建计算属性，返回值是一个 ref() 实例。按照惯例，使用前需要先引入。

• computed创建只读计算属性

 // 3.使用computed来创建一个计算属性 
    const count = ref(1);
    // 创建一个计算属性 使其值比 count 大 1
    // 创建只读属性
    let bigCount = computed(()=>{
      console.log('a')
      return count.value+1
    })
    console.log(bigCount.value)
    bigCount.value++   //报错

• computed 创建一个可读可写的属性

	 // 创建一个可读可写的计算属性 传入对象
    var bigCount = computed({
      get:()=>{
        console.log('有人读取了bigCount属性');
        return count.value+1;
      },
      set:val=>{
        console.log('有人设置了bigCount属性',val);
        return val
      }
    })
    console.log(bigCount.value)
    bigCount.value = 2;
    console.log(bigCount.value)

控制台输出