vue3初学之composition API实现todo List

主要是看了慕课网的vue3教程，实践其中的案例，分享一下实践中遇到的一些问题
首先感谢慕课网老师的课程，课程地址：课程地址
先看下自己实践的效果，初学者，大佬勿喷
没调整样式，但是功能都实现了，后面上完整代码

实践过程

1.安装vue3环境，这里不多说了，具体可以百度
2.写代码，具体可以参照视频中的案例，这里只分享一下自己写的时候可能会遇到的一些问题

问题

一，新创建的vue3项目，有defineComponent，而视频中没有
defineComponent函数，只是对setup函数进行封装，返回options的对象；在TypeScript下，给予了组件 正确的参数类型推断 。
因为有defineComponent，所以setup最后return的参数跟视频中也不一直，我这里是

return {state,mousedown,add,dblclick,myinput,deletea}

在dom中调用setup中的参数的时候，需要在参数前面加上state.，比如state.ArrayList.length.
二，根据视频中的代码写了之后，在勾选后，发现并没有将勾选的数据添加到已完成中，发现弹幕中也有同学遇到这个问题，关键代码

 FilshArr:computed(()=>state.ArrayList.filter(item=>item.isFilsh))

原因是有的同学在使用computed的时候，可能直接在里面用了return，所以会导致没有数据，箭头函数里如果只有一句执行语句，是省略return的，如果你也遇到了这个情况，不放去掉return试试

三，在实现编辑功能时，无法获取ref中的value
可能出现问题的地方：
1：

import {ref, computed,defineComponent, onUpdated, reactive } from 'vue';

没有引入 ref
2：
return中没有return dom绑定的ref

return {state,mousedown,add,dblclick,myinput,deletea}

检查一下，加上即可
总结一下
这个demo中主要用到的js中数组的 过滤（filter）增加（push）删除（splice），ts的一些语法和vue2中常用的指令和计算属性（computed），最后附上完整的代码，有不同问题的可以留言一起讨论

<template>
<div @mousedown = mousedown>
  <h3>共有<span type="">{{state.ArrayList.length}}</span>个，已完成<span>{{state.FilshArr.length}}</span>个</h3>
  <ul>
    <li v-for="(item,index) in state.ArrayList" :key="index">
      <div class="mb-3 form-check" v-if="!item.isFilsh">
        <input type="checkbox" class="form-check-input" :id="'item'+index" v-model="item.isFilsh" @click="item.isFilsh = !item.isFilsh">
        <label class="form-check-label" v-if="!item.isEditor" @dblclick="dblclick(item,index)">{{item.name}}</label>
          <input type="text" class="form-control"  v-model="item.name" ref="myinput" v-else>
        <button type="button" class="btn-close" aria-label="Close" @click="deletea(index)">X</button>
      </div>
    </li>
  </ul>
  <div>已完成</div>
  <ul>
    <li v-for="(item,index) in state.FilshArr" :key="index">
      <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" :id="'item'+index" v-model="item.isFilsh" disabled>
        <label class="form-check-label" :for="'item'+index">{{item.name}}</label>
      </div>
    </li>
  </ul>
  <h3>添加</h3>
   <input type="text" class="form-control" v-model="state.addname">
   <button @click="add">添加</button>
</div>
</template>

<script>
import {ref, computed,defineComponent, onUpdated, reactive } from 'vue';

export default defineComponent({
  setup(){
    const myinput = ref(null)
    const mousedown =(e)=>{
      if(myinput.value && e.target != myinput.value){
         state.ArrayList[state.Edindex].isEditor=false
      }
      };
    const dblclick =(item,index)=>{
      state.Edindex = index
      state.ArrayList[index].isEditor = true
    };
    
    const add =()=>{
      state.ArrayList.push({name:state.addname,isEditor:false,isFilsh:false})
      state.addname =""
    };
    const deletea =((index)=>{
      state.ArrayList.splice(index,1)
    });
    const state =reactive({
      value: "",
      addname:"",
      
      Edindex:0,
      ArrayList:[
        {name:"1",
         isEditor:false,
         isFilsh:false
        },
        {name:"2",
         isEditor:false,
         isFilsh:false
        },
        {name:"3",
         isEditor:false,
         isFilsh:false
        },
      ],
      FilshArr:computed(()=>state.ArrayList.filter(item=>item.isFilsh))
    })
    
    return {state,mousedown,add,dblclick,myinput,deletea}
  }
});



</script>


<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>