Los primeros en adoptar las nuevas características de la lista de tareas pendientes de implementación de la API de la función vue3.0 Vue

Los primeros en adoptar las nuevas características de la lista de tareas pendientes de implementación de la API de la función vue3.0 Vue

La API de la función Vue ha sido anunciada por un tiempo, la probé un poco hoy y escribí una lista de tareas pendientes

Dependencia principal: vue: 2.6.10 vue-function-api: 2.0.6

1. Parent.vue

<template>
  <div>
    <Children
      :list="list"
      @subAddItem="addItem"
      @subRemoveItem="removeItem"
      @subRemoveAll="removeAll"
    />
  </div>
</template>

<script>
import {
    
     value, onCreated } from "vue-function-api";
import Children from "./Children";
export default {
    
    
  components: {
    
    
    Children
  },

  setup(props, context) {
    
    
    const list = value([]);

    // 异步数据
    const getList = () => {
    
    
      return new Promise((resolve, reject) => {
    
    
        const defaultList = [
          "开会",
          "开完会写代码",
          "和产品沟通",
          "沟通完写代码",
          "和设计沟通",
          "写代码"
        ];
        setTimeout(() => {
    
    
          resolve(defaultList);
        }, 100);
      });
    };

    // 获取数据，初始化list数据
    onCreated(async () => {
    
    
      try {
    
    
        const defaultList = await getList();
        list.value = defaultList;
      } catch (error) {
    
    
        console.log(error);
      }
    });

    // 添加单个
    const addItem = inputValue => {
    
    
      list.value.push(inputValue);
    };

    // 删除单个
    const removeItem = item => {
    
    
      const result = confirm("确定要删除此项？");
      if (result) {
    
    
        list.value = list.value.filter(val => val !== item);
      }
    };

    // 删除所有
    const removeAll = item => {
    
    
      const result = confirm("确定要删除全部？");
      result ? (list.value = []) : "";
    };

    return {
    
    
      list,
      addItem,
      removeItem,
      removeAll
    };
  }
};
</script>

2. Componente secundario Children.vue

<template>
  <div class="container">
    <h3>vue-function-api 实现todo list</h3>

    <div>
      <input type="text" v-model="inputValue">
      <button @click="subAddItem">新增</button>
    </div>

    <ul class="wrapper">
      <li class="item" v-for="(item,index) in list" :key="index">
        {
    
    {
    
    item}}
        <button class="delete-button" @click="subRemoveItem(item)">删除</button>
      </li>
      <li class="item" v-if="list.length>1">
        <button class="delete-button" @click="subRemoveAll">删除全部</button>
      </li>
    </ul>
  </div>
</template>

<script>
import {
    
     value } from "vue-function-api";
export default {
    
    
  props: {
    
    
    list: {
    
    
      type: Array,
      required: false,
      default: () => []
    }
  },
  setup(props, context) {
    
    
    const {
    
     emit } = context;
    const inputValue = value("");

    // 添加单个
    const subAddItem = () => {
    
    
      const {
    
     value } = inputValue;
      const {
    
     list } = props;
      if (!value) {
    
    
        alert("请输入内容");
        return;
      }
      if (list.includes(value)) {
    
    
        alert("已存在此项");
      } else {
    
    
        // 分发事件
        emit("subAddItem", value);
      }
      inputValue.value = "";
    };

    // 删除单个
    const subRemoveItem = item => {
    
    
      // 分发事件
      emit("subRemoveItem", item);
    };

    // 删除所有
    const subRemoveAll = () => {
    
    
      // 分发事件
      emit("subRemoveAll");
    };
    
    // 生命周期
    onCreated(() => {
    
    
      console.log(props.list, "onCreated"); // 拿不到异步props数据
    });

    onMounted(() => {
    
    
      console.log(props.list, "onMounted"); // 拿不到异步props数据
    });

    onUpdated(() => {
    
    
      console.log(props.list, "onUpdated"); // 可以拿到异步props数据
    });

    return {
    
    
      inputValue,
      subAddItem,
      subRemoveItem,
      subRemoveAll
    };
  }
};
</script>

<style lang="less" scoped>
.container {
    
    
  width: 400px;
  margin: 200px auto;
  padding: 20px;
  background-color: #f5f5f5;
  box-sizing: border-box;
  .wrapper {
    
    
    box-sizing: border-box;
    width: 200px;
    margin: 0;
    padding: 0;
    .item {
    
    
      box-sizing: border-box;
      list-style: none;
      overflow: hidden;
      margin: 0;
      margin-top: 20px;
      color: #373737;
      cursor: pointer;
      .delete-button {
    
    
        float: right;
      }
    }
  }
}
</style>

3. Date cuenta del efecto