响应式基础
声明响应式状态(ref & reactive)
ref ( )
ref( ... )接收参数, 使用.value属性进行调用数据
reactive ( )
reactive( [ ... ] )直接可以内部调用 但是具有一定的局限性 比如：不能替换整个对象
计算属性（computed）
计算属性缓存和方法在结果上是相同的 然而不同之处在于 计算属性会基于其响应式依赖被缓存
避免直接修改计算属性值:
计算属性的返回值是只读的 并且永远不应该被更改
条件渲染
V-if
v-if指令用于条件渲染 只有在指令表达式是真值才会被渲染
V-show
v-show会在DOM元素 渲染保留元素仅仅切换了该属性名上display的Css属性
v-show不支持在模板中使用 也不能与v-else搭配
V-if Vs V-show
v-if真实的按条件渲染 确保在切换时 条件区域内事件监听器和组件都能被销毁和创建
v-if如果在首次渲染值为false则不会做任何的事情 只有条件首次值为true才能完成渲染相比之下
v-show简单许多 无论条件如何 都会渲染 只有Css display属性会被切换总的说：
v-if有更高的切换开销 而v-show有更高初次渲染开销 因此 需要频繁切换 则使用v-show较好 绑定条件很少改变 则v-if会更合适
Pinia状态管理库
定义 Store
Store 是用 defineStore()定义的， 它的第一个参数要求是一个独一无二的名字
命名最好是用
use开头 Store结尾的
defineStore() 的第二个参数可接受两类值: Setup函数 或 Option对象
在Setup Store中:
ref( ) 就是 state属性
computed( ) 就是 getters
function( )就是 actions
响应式属性: storeToRefs( ) 可以直接从store中结构action 因为它们被绑定到store上
Getter
getter 完全等价与 store 的 state的计算值 可以同 defineStore( ) 中的 getters 属定义它们
推荐使用箭头函数 并且它接收 state 作为第一个参数
Action
action相当于组件中的 method 它可以通过 defineStore( ) 中的 actions 属性定义
类似 getter，action 也可通过 this 访问整个 store 实例，并支持完整的类型标注(以及自动补全✨) 。不同的是，action 可以是异步的，你可以在它们里面 await 调用任何 API
