vue3 写个task list，带你了解基础用法

Vue 特点

1、轻量级、渐进式框架。

2、双向数据绑定。

3、组件化构建。

牛刀小试

先做个简单的demo压压惊，了解一下vue的基本代码风格。

基础知识

- setup

setup 是 Composition API的入口，在beforeCreated之前，在这里还method，所以拿不到this，定义好的数据跟data一样，需要return出去。

- ref

1. 参数是基本数据类型，也可以是对象类型。本质上，vue会自动包装为reactive，生成一个proxy对象。那既然ref是reactive的再封装，为什么不直接用reactive，而要多此一举的用ref呢？我想大概是想保留对基本类型的规范定义吧？他们两个都可以实现响应式数据
2. 赋值的时候需要用a.value来赋值，但是在template里可以直接使用。

- reactive

1. 参数是复杂的对象类型，reactive会将数据包装成proxy对象，如果想转换为普通引用类型需要toRaw
2. 如果想让对象里的某个属性变成响应式数据，需要加toRefs.let currentList = reactive(['xxx'])赋值操作之后视图不会更新，需要包一层，改为：let state = reactive({currentList: ['xxx']})

对于这两种方式选择的建议：

1.严格ref定义基本类型数据，reactive定义引用类型数据。

2.因为输出的时候都是要return出去的，分开定义比较麻烦，不如都定义成reactive数据，包成一个对象，输出的时候...toRefs(xxx)就直接将变量结构出去了。

- ref、toRef、toRefs的区别

1. ref:复制，修改响应式数据不影响以前的数据；数据改变，界面自动更新

2. toRef:引用，修改响应式数据会影响以前的数据；数据改变，界面不自动更新

3. toRefs：

   (1)接收一个响应式对象作为参数，它会遍历对象身上所有属性，然后调用单个toRef

   (2)toRefs 只会为源对象中包含的 property 生成 ref。如果要为特定的 property 创建 ref，则应当使用 toRef

@符号用于绑定事件是

:符号用于数据绑定

{{}}是文本插值，可以加载data和computed里的数据，也可以运行js表达式

v-for用于循环列表解析渲染，通常要绑定key值，保证key值得唯一性key值或者绑定的key值不唯一，在删除节点的时候会因为diff算法，复用旧dom元素导致不预期的错误。

Task List 实践（动态增添和删除）

我们用这些知识来做个带增添和删除功能的task list

复杂一点，动态样式、输入修改和标记

1. class绑定语法: 动态绑定class，:class="['xxx', 'xxx']"， 可以接受三或运算符等运算表达式来判断是否取用class
2. style绑定语法: 动态绑定内联样式, :style="{xxx: 'xxx'}"或者:style="{'xxx-xxx':'xxx'}"，同样接受三或运算符判断是否取用样式
3. 条件渲染v-show & v-if: 用于判断元素显隐，v-if不建议与v-for同时使用，必要时使用v-show代替。v-if会重新创建dom，v-show是指控制dom的显隐。

computed 计算属性做过滤功能

• computed 计算属性是一个只读数据，会根据源数据自动分练数据，不能手动更改。可以使用set和set劫持赋值和读取操作做其他处理。

看完后觉得不够明了？可以告诉我哦。