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])