vue的todolist的分析

在vue中computed计算属性,依赖项目不光可以是data的数据,还可以是其余的计算属性
@sublim.prevent=“addTodo”
@sublim.top=“addTodo”
form 用了才能有required这个属性

方法写在methos中，不看以写在计算属性中 computed:{ addToto(){ conosle.log('322') } }

方法写在methos中
computed:{
addToto(){
conosle.log(‘322’)
}
}

问题是：

从上面往下勾选,会出现不良的反应

解析：vue的底层为做更好优化,在相同的元素的地方尽可能的去做了复用元素的操作
出现的原因是：diff算法引起的
解决方案：
一切v-for的时候,给每一项都加上key这个属性,属性值在每一项中保持唯一
key的值一般使用循环时每一项的id属性来控制(推荐)
如果实在没有id的时候,使用循环的下标也行
但是如果有元素移除的时候,要注意
v-for一定要使用key

从下面往数点没有问题

要删除当前的元素,可以定义一个方法delTodo(item.id)
@click=“delTodo(item.id)”
// 根据传过来的id做删除功能
数组.splice(下标,1) 完成删除工作
在methods中定义方法,注意不要搞错了在(computed)中
1.根据id去寻找todos中对应的id的项目的下标find|| findIndex
findIndex找数组对应的下标
获取下标
let index=this.todos.,findIndex((Item)=>{
return item.id===id
})
2.根据下标来删除
this.todos.splice(index,1)
3.全部删除
delAll(){
this.todos=[]
}

4.刷新页面还在,可以用localStroage保存起来
在删除和添加和清空需要保存
localStroage不能存储数组对象(要换JSON.stringify(数组)),只能储存字符串
注意将数组先转换
如果多个地方需要用存储功能,可以定义一个方法
//保存操作
saveTodo(){
window.localStroage.setItem(‘todos’,JSON.stringify(this.todos))
}
对象的属性做修改,监听没有识别到,所以需要用到深度监听
watch:{
//深度监听,要写成对象的形式
todos:{
handler(){
this.saveTodo()
}，
deep:true//深度监听
}
保存操作,和页面刷新回来
可以在created中,去做
或者在data中去做
存储的是json，取出来的时候,要转为parse格式
data:{
// 注意：
// 1.是否存在
// 2.存在要解析成数组
// 判断有没有,有就把它解析成对象, 没有就为空对象
todos:window.localStorage.getItem(“todos”)?
JSON.parse(window.localStorage.getItem(“todos”)):[]，
title:""
// 这种是错误的
// todos:window.localStorage.getItem(“todos”) 没有数据,它这里是把undefined拿去解析
}