因为工作须要，当前可能会敲vue代码了，所以明天开始会零散的记录一下本人学Vue3.0的一些案例。
就从经典的TodoList案例开始吧～
也算补上之前react的todolist案例的坑吧
简略的在草稿纸上写出页面的整体设计思路为3层div包裹，心愿刚开始学习的时候，肯定要本人去理论入手去画出大略的效果图。再简略不过的页面设计了。
一.在vue的template标签中编写html文件
依据下面的草图来写出简略的构造，非常简单的代码。三个<div>来实现草稿的大略实现。
设计动态页面为下图所示。
二.最首先的性能就是，如何获取用户输入框的值
在vue里是用v-model这样的绑定形式来双向绑定一个变量的，我这里用的是vue3中<script>标签的setup语法糖编写的代码，书写格调和react十分类似，也是我比拟喜爱的写法。
这里咱们须要用到vue里的的ref办法，先引入在说吧。
看一下Vue官网对ref的解释
在我看来，这个和react的useRef返回一个带有current属性的对象很相似。
通过理解，在vue中，定义一个根本类型，要用ref，定义一个援用类型要用reactive,实质上应用ref(hhh)其实就是调用了reactive({value:"hhh"})。
（补充阐明一下:vue在<template>标签中能够主动获取ref
变量对象的value，然而在<script>标签中应用时，要带上.value才能够。）
回到正题
理解了ref的应用，咱们就先定义一个变量叫做newTodo来绑定input框来获取用户的输出。
此时newTodo.value就和input框的value绑定了。
三.设计增加button性能的实现
在这个按钮之前，咱们要设定一个空的数组，来接管用户的输出数据，并且在外面再增加一些默认的数据来显示。
接下来先渲染出咱们默认的数据。在template标签中写
这里我在<ul>标签里加了v-if判断语句，判断这个doLists数组是否为空数组，如果为空，则不渲染。<li>标签就是简略的v-for遍历。
别忘了绑定一个key
按钮的逻辑其实很简略，就是往这个todoLists数组外面增加数据,而后将用户输出的值清空。
（再揭示一下，在<script>标签里通过ref返回对象须要本人去调用value属性才能够应用）
试一下成果
能够失常增加并且显示。
四.设置一下增加按钮的逻辑判断
当初有一个状况就是我点击增加的时候，如果用户输出的值是空值，仍旧能增加，当初设计不容许这种状况产生。实现的形式有很多，我集体想设计为:当用户输出值为空，按钮禁止应用。
刚开始十分不习惯，因为在react里写js代码很明确须要在{}里写，然而vue全是引号里编写，在这里先暂且这样了解吧，当你应用v-指令语法时候，是个属性的=前面的""里就是要写js代码了。
所以这里咱们不能写原生的disabled属性，这样vue会把前面的三元表达式认为是字符串。
成果如下：
五.实现item的删除性能
咱们心愿在每个item的前面呈现一个删除按钮，当咱们不喜爱这个事件的时候，能够间接删除。
页面成果如下
这时候开始思考删除按钮的逻辑。我这里有两种设计思路;
1.用filter去筛选出不等于以后index索引值的数组从新渲染
2.用slice去组合以后item之前和之后的数据从新渲染。
办法一.
咱们须要拿到以后我的项目的index值，很简略，去拿v-for指令的第二个参数，同时将该值传入给咱们的del函数
(如果之前你理解过react，那么这里你肯定会有纳闷，因为react这种场景是须要应用高阶函数返回这个del函数的，不然就会造成组件刚挂载就执行的成果,然而vue不会，然而其实vue背地帮你写成了这样的代码)
我也更习惯这样的写法。
接下来就是办法的逻辑了。因为我点击的时候，拿到的index是以后我要在todoLists里删除的那个选项索引，那么咱们反向思考，我把那些索引不等于这个值的那些item从新渲染不就好了吗？
这样就能够实现咱们要的成果了
点击睡觉前面的按钮实现需要。
办法二.
其实思路是一样的，都是反应思考，避开咱们拿到的这个index。
slice这个办法我之前的文章中细讲了很多了，不再过多赘述了,成果也是能够失常实现的。
办法三
这个办法是我长期想到的，试一试能够不，用splice去解决。
事实证明是能够的
让咱们删除谢谢
我这里多点了几个，没发现bug。
大抵性能就这样，后续还会更新款式和更加细节的性能。