【Vue3 从入门到实战进阶式掌握完整知识体系】033-Composition API：使用 Composition API 开发TodoList

港控/mmm° 2023-10-03 09:48 28阅读 0赞

### 文章目录 ###

*   *  4、使用 Composition API 开发TodoList
     *   *  实现简单的添加列表
         *  运行结果
         *  封装优化
         *  运行结果

## 4、使用 Composition API 开发TodoList ##

### 实现简单的添加列表 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>了解循环</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        setup(){
         
          const {
          ref, reactive } = Vue;
          const inputValue = ref('大哥刘备');
          const list = reactive([]);
          const handleClick = () => {
         
            list.push(inputValue.value);
          }
          return {
         
            inputValue,
            list,
            handleClick
          }
        },
        template: `
        <div>
          <div>
            <input v-model="inputValue" />
            <button @click="handleClick">添加</button>
          </div>
          <ul>
            <li v-for="(item, index) in list" :key="item">{
          {item}} -- {
          {index}}</li>
          </ul>
        </div>`
      });
      
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210615224606092][]

### 封装优化 ###

> 代码全写在 setup 里面非常臃肿，且可读性差，不易维护

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>了解循环</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
    
      // 封装处理 list 的方法
      const handleList = () => {
         
        const {
          reactive } = Vue;
        const list = reactive([]);
        const addItem = (item) => {
         
          list.push(item);
        }
        return{
          list, addItem }
      }
    
      // 封装处理 inputValue 的方法
      const handleInputValue = () => {
         
        const {
          ref } = Vue;
        const inputValue = ref('大哥刘备');
        return{
          inputValue }
      }
    
      const app = Vue.createApp({
         
        setup(){
         
          const {
          list, addItem} = handleList();
          const {
          inputValue } = handleInputValue();
    
          return {
         
            list, addItem, inputValue
          }
        },
        template: `
        <div>
          <div>
            <input v-model="inputValue" />
            <button @click="() => addItem(inputValue)">添加</button>
          </div>
          <ul>
            <li v-for="(item, index) in list" :key="item">{
          {item}} -- {
          {index}}</li>
          </ul>
        </div>`
      });
      
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210615230521841][]

[image-20210615224606092]: https://img-blog.csdnimg.cn/img_convert/5a40ce156bb09c24c1ec6a4a436e2ce0.png
[image-20210615230521841]: https://img-blog.csdnimg.cn/img_convert/ed94431441ea01d0d4b9716f2eda26f0.png