vue3知识总结

vue3
npkill  快速删除项目中的node_modules
  安装：`npm i -g npkill`
  使用：`npkill` 敲空格确定删除，退出按q

vite

vite的特点
快，比webpack快10-100
原理是，它是基于script标签的type属性值的module模块化，让浏览器去做了80%的解析
webpack的解析完全依赖于nodejs解析，所以webpack相对vite来说，耗时间多。

创建一个vite项目
`npm  create  vite@latest`

命令
 1. npm run dev  开启开发环境
 2. npm run build  开启生产环境--打包

语法篇
  变化
     template  标签里的语法一点没变
     style  也没变
     script  语法有变化

  底层改变了什么？
     1.vue3 使用es6的proxy做数据的劫持，更好、更快、更强大
     2.在虚拟dom上自动添加补丁，每一个元素都有一个默认添加的key，v-for不用再加key了
     3.vue2的选项模式（面向对象形式），vue3是组合模式（函数式编程），所以，vue3打包之后的体积更小，按需使用。
  ref和reactive

vue3的ref两种用法，绑定dom对象，用来声明基本数据类型的值

vuex
定义：全局状态管理器，全局数据共享。
特点：数据双向响应,数据流向是单向的【自上而下，从父级传到子级的过程，并且子级不可以修改父级的数据】
缺点：数据存在内存中，刷新页面会丢失改变的状态值，需要使用持久化插件把数据存在本地，vuex-persist
vue2的vuex和vuex没有半点更改。只有初始化的语法略有改动。

差异
1.由createS tore函数创建store实例
2.组件内使用store使用useStore高阶函数得到store对象

持久化插件
veux-persister

vue3代码的组件内抽离优化【组件瘦身】
可以抽离数据和方法到外部js中，但是对于props，store，生命周期和router的初始化不可以抽离。

组件通信
1.父传子，子组件使用defineProps函数接收
2.子传父，子组件使用definemits函数接收
3.v-model升级可以绑定多个
4.子组件向父组件主动暴露数据，使用defineExpose函数

vue-router
语法没有变化，只是初始化的时候需要使用createRounter创建路由实例,mode项变成了history,并且使用
createWebHistory方法初始化。

组件内获取路由实例使用useRouter函数初始化
组件内获取当前路由对象useRoute函数初始化

teleport vue3新增的的内置组件，，可以将包裹的元素挂载到指定的任意元素中去，从而脱离当前组件的文档位置，但是作用域还有数据等还是使用的当前组件

虚拟dom和diff算法
1.虚拟dom就是通过diff算法对Js生产的dom计算得来的，它并不是真实的dom节点，是js生成的
2.diff算法：递归+对比计算，新旧dom对比，同级对比，发现由不一样的地方，直接用新的替换旧的。

h()  创建虚拟dom
<div  id  classs>1234</div>
{
type:'div',
props: [ 'id' , 'class'],
children: '123' or
children: { type:' p ' }  or [ { } , { } ]
}
语法：h('标签类型'，{id:"",class:"",/*innerHTML*/},[children])