Vue3 Composition API

p15 Vue3 Composition API

---

Mixin

全局混入

、

options API的弊端

认识Componsition API

setup函数的参数

setup不可以使用this

Reactive API

ref

readonly

p16 Composition API(二)

---

toRefs

<template>
  <h2>{{ age }}</h2>
  <button @click="increment">点击年龄增加</button>
</template>

<script>
import { reactive, toRef } from "vue";
export default {
  setup() {
    const info = reactive({
      name: "zhangsan",
      age: 18,
    });

    // toRefs: 将reactive对象中的所有属性都转成ref，建立链接
    // const { name, age } = toRefs(info);

    // toRef： 对其中一个属性进行转换ref，建立链接
    const age = toRef(info, "age");
    const increment = () => {
      age.value++;
    };
    return {
      name,
      age,
      increment,
    };
  },
};
</script>

<style scoped></style>

computed

watchEffect

在setup中使用ref

watch