共计 1838 个字符，预计需要花费 5 分钟才能阅读完成。
因为工作须要，当前可能会敲 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。
大抵性能就这样，后续还会更新款式和更加细节的性能。