配置环境
最好node16
用vite创建vue项目 创建最新版本
npm install vite@latest 安装vite
npm create vite@latest 创建项目
通过vue脚手架创建
npm init vue@latest
vue文件结构
public文件夹下文件是不会被vite编译
src下assets文件夹也是存放静态资源
vue文件中template只能存在一个，setup的js只能存在一个，非setup的js可以存在多个
装上两个volar插件才可以书写vue3代码才有提示，同时将vue2的vetur禁用,两个东西有冲突
虚拟dom和diff算法
虚拟dom就是js生成的一个AST语法树
直接操作dom会非常浪费性能（dom属性实在太多了），直接操作js会很快
有很多dom可以复用，就出现了diff算法
diff算法是什么？
分为有key和无key
无key时，假如数据发生了插入，diff算法会将新值直接在原本位置上发生替换，替换完多余出来的数据新增上，如果少了就删除
有key时，从前往后按照顺序对比，如果发现新的数据和旧的不一致就从尾部开始对比，发现新节点多出来就新增，发现旧节点多出来就卸载
如果是发生了乱序 先构建新节点map映射关系，然后进行最长递增子序列算法，拿到结果后跟当前节点比较，如果当前节点不再这个子序列里边说明节点需要移动，在里边的话直接跳过
ref全家桶
vue3快速模板
点击左边齿轮，选择用户代码片段，选vue.json
ref
所有被ref或者reactive包裹的数据才是响应式的
ref返回的是es6的class类，修改或者输出值需要加.value
isRef
isRef(obj) 判断这个obj是不是ref响应式 返回布尔值
shallowRef 浅层次响应式
更新值时同一个函数内不能有ref，否则shallowRef也会变为深层次响应，原理是ref内部调用了triggerRef，所以会影响到shallowRef
triggerRef 收集依赖，强制更新
triggerRef(state)
customRef 自定义ref
