composition-api

Composition API字面意思是组合API，它是为了实现基于函数的逻辑复用机制而产生的。

提供了以下函数：

1. setup

composition-api所有代码都写在里面

2. ref

定义响应式数据，即数据试图可以双向绑定，主要应用于：字符串、布尔值、数字、数组。

3. reactive

定义响应式数据，主要应用于：对象。

4. toRefs

解构响应式对象数据。

<template>
  <div class="hello">
    <h1>{
    {
     msg.text }}</h1>
    <button @click="getMsg">获取msg</button>
    <h1>{
    {
     title }}</h1>
    <button @click="getTitle">获取title</button>
    <h1>{
    {
     name }}</h1>
  </div>
</template>

<script  >
import {
     reactive, ref, toRefs } from "vue";
export default {
    
  name: "HelloWorld",
  setup() {
    
    // 使用需要先引入
    var title = ref("我是一个标签");
    var msg = reactive({
    
      text: "张三",
    });
    var user = reactive({
    
      name: "张张",
    });
    // 获取reactive定义的数据
    var getMsg = () => {
    
      console.log(msg.text); //张三
      msg.text = "里斯";
      console.log(msg.text); //里斯
    };
    // 获取ref定义的数据
    var getTitle = () => {
    
      console.log(title.value); //我是一个标签
      title.value = "改变了";
      console.log(title.value); //改变了
    };
    return {
    
      title,
      msg,
      getMsg,
      getTitle,
      // ...user, 这样写，数据就不能双向绑定了
      ...toRefs(user), //toRefs结构，数据就可以进行双向绑定
    };
  },
};
</script>

<style scoped>
</style>

5.watchEffect

在相应式的跟踪其依赖项时立即运行一个函数，并在更改以后重新运行，不管是否改变都会执行一次

<template>
  <div class="hello">
    <h1>{
    {
     name }}</h1>
  </div>
</template>


<script  >
import {
     reactive, toRefs, watchEffect } from "vue";
export default {
    
  name: "HelloWorld",
  setup() {
    
    // 非响应式数据
    let data = reactive({
    
      num: 12,
    });
    // 改变num就会执行一次，另外不管num改不改变都会执行一次
    watchEffect(() => {
    
      console.log(data.num);
    });
    setInterval(() => {
    
      data.num++;
    }, 1000);
    return {
    
      ...toRefs(data),
    };
  },
};
</script>

<style scoped>
</style>

6.watch

对比watchEffect，watch 允许我们：

• 懒执行，也就是说仅在侦听的源变更时才执行回调
• 更明确哪些状态的改变会触发侦听器重新运行
• 访问侦听状态变化前后的值

<template>
  <div class="hello">
    <h1>{
    {
     name }}</h1>
  </div>
</template>


<script  >
import {
     reactive, toRefs, watch, ref } from "vue";
export default {
    
  name: "HelloWorld",
  setup() {
    
    // 非响应式数据
    let data = reactive({
    
      num: 12,
    });
    let age = ref(1);
    watch(age, (v, old) => {
    
      console.log(v, old);
    });
    watch(
      () => data.num,
      (v, old) => {
    
        console.log(v, old);
      }
    );
    //监听多个值
    watch([age,data.num], (v, old) => {
    
      console.log(v, old);//v, old都是数组
    });
    setInterval(() => {
    
      data.num++;
      age.value++;
    }, 1000);
    return {
    
      ...toRefs(data),
      age,
    };
  },
};
</script>

<style scoped>
</style>

7.computed

<template>
  <div class="hello">
    <h1>{
    {
     title }}</h1>
    <p>{
    {
     newTitle }}</p>
  </div>
</template>


<script  >
import {
     ref, computed } from "vue";
export default {
    
  name: "HelloWorld",
  setup() {
    
    // 使用需要先引入
    let title = ref("我是一个标签");
    let newTitle = computed(() => {
    
      return "哈哈哈，" + title.value;
    });
    return {
    
      title,
      newTitle,
    };
  },
};
</script>

<style scoped>
</style>

8.readonly "深层"的只读代理

传入一个对象（可双向绑定或普通）或ref，返回一个原始对象的只读代理，不可双向绑定。

<template>
  <div class="hello">
    <h1>{
    {
     name }}</h1>

    <input type="text" v-model="name" />
  </div>
</template>


<script  >
import {
     reactive, readonly, toRefs } from "vue";
export default {
    
  name: "HelloWorld",
  setup() {
    
    // 非响应式数据
    let obj = reactive({
    
      name: "张三",
      age: 12,
    });
    // readonly 将响应式数据改成只读数据
    obj = readonly(obj);
    return {
    
      ...toRefs(obj),
    };
  },
};
</script>

<style scoped>
</style>