为什么要用组合式API呢

用原始方式写，业务逻辑会过于分散；
使用组合式API，可以把同一业务逻辑的代码放在一起；

使用组合式API写代码

1、所有逻辑都放在setup函数，它的第一个参数是props对象（setup函数中的props是响应式的，不能用ES6解构，会消除prop的响应性）setup文档
2、通过ref、reactive、toRef来创建响应式数据；
3、视图要用到的变量、方法为setup函数返回的对象属性；
4、watch、computed是个函数；
5、生命周期钩子写法微调，xyz变成onXyz，比如mounted变成onMounted，而且created和beforeCreate不再需要，这是因为setup函数本身就是围绕created和beforeCreate来进行的，所以不需要再定义它们，这两个钩子里编写的任何代码都直接写在setup函数里即可；

setup函数中要使用context.emit（context是setup的第二个参数），不能在setup函数里使用this.$emit，你可以在methods里使用this.$emit，但是我们以后在vue3中尽量不使用methods，要使用setup；

响应式API

ref

ref和reactive一样, 也是用来实现响应式数据的，不过它是传递一个简单值
ref底层的本质其实还是reactive，系统会自动根据我们给ref传入的值将它转换成ref(xx) -> reactive({value:xx})；
在JS中我们要用xx.value，但是在HTML模板中，直接使用xx

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

reactive

传递一个对象，把它变成响应式数据（结合toRef代码一起看）

toRef

为源响应式对象上的某个 property 新创建一个 ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接。

const state = reactive({
 foo: 1,
 bar: 2
})
const fooRef = toRef(state, 'foo')

fooRef.value++
console.log(state.foo) // 2

state.foo++
console.log(fooRef.value) // 3

toRefs

将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref；
一般用于setup参数props的结构居多，比如：const {title} = toRefs(props)

const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)
/*
stateAsRefs 的类型:

{
  foo: Ref<number>,
  bar: Ref<number>
}
*/

// ref 和原始 property 已经“链接”起来了
state.foo++
console.log(stateAsRefs.foo.value) // 2

stateAsRefs.foo.value++
console.log(state.foo) // 3

image.png

响应式状态解构

import { reactive, toRefs } from 'vue'

const book = reactive({
  author: 'Vue Team',
  year: '2020',
  title: 'Vue 3 Guide',
  description: 'You are reading this book right now ;)',
  price: 'free'
})

let { author, title } = toRefs(book)

title.value = 'Vue 3 Detailed Guide' // 我们需要使用 .value 作为标题，现在是 ref
console.log(book.title) // 'Vue 3 Detailed Guide'

完整示例

<template>
  有{{ count }}次
  <button @click="onAddCount">click</button>
  <h1>{{ helloText }}</h1>
</template>

<script>
import { onMounted, ref, computed, watch } from "vue";

function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(Math.floor(Math.random() * 5));
    }, 3000);
  });
}

export default {
  props: ["msg"],
  setup(props) {
    let count = ref(0);
    const getCount = async () => {
      count.value = await getData();
    };
    const onAddCount = () => {
      count.value++;
    };
    onMounted(getCount);

    let name = ref("win");
    let helloText = computed(() => {
      return props.msg + " " + name.value;
    });

    watch(count, (newvalue, oldvalue) => {
      let result = "";
      for (let i = 0; i < count.value; i++) {
        result += name.value;
      }
      console.log(result, "result");
      name.value = result;
    });

    return {
      count,
      onAddCount,

      name,
      helloText,
    };
  },
};
</script>

【Vue3】组合式API