主要是看了慕课网的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>