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

命令

'npm run dev' 开启开发环境
·npm run build· 开启生产环境--打包

语法篇

变化

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

底层改变里什么？

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

ref和reactive

ref 两种用法：1用于声明基本数据类型的值，2用于绑定dom对象。ref在js中使用，需要点value，在dom中使用则不需要。
reactive 用于声明引用数据类型的值，可以使用toRefs来解构成ref值使用。
关系是：reactive底层使用的是ref的实现。
它们俩基本上替代了vue2中的data。

setup

setup函数，为了平滑的从vue2语法平滑过度到vue3语法，在对象配置里使用setup函数
setup属性，最后setup成为了script标签的属性，只要标签中声明的引入的一切资源，都可以直接使用。
setup特性，它本身就替代了生命周期里的创建阶段，所以没有this

生命周期

vue2的

beforeCreate 创建前
created 创建完成
beforeMount 挂载前
mounted 挂载完成
beforeUpdate 更新前
updated 更新完毕
beforeDestroy 销毁前
destroyed 销毁后

vue3的

vue3的创建阶段就是setup属性替代了
onBeforeMount 挂载前记录一个用户的访问信息-时间-ip-网络-设备类型
onMounted 创建完成【*用于发起页面加载完成后的第一次自动请求数据】
onBeforeUpdate 更新前可以在这里对数据再一次修改
onUpdated 更新完毕观测更新后的数据
onBeforeUnmount 卸载前【*用于清除掉全局的定时器，变量，闭包等等】
onUnmounted 卸载后背后做日志的上传工作

computed和watch

computed 作为一个工具函数，需要从vue里解构使用

声明一个只读的计算属性

let str = computed(() => refdata.vlaue)

声明一个可以读写的计算属性

let data = computed({
  get() {
    return refname.value
  },
  set(val) {
    refname.value = val
  }
})

watch

监听一个数据

watch(data, (val,old) => {
})

监听多个数据

watch([d1,d2], ([newD1,newD2],[oldD1,oldD2]) => {
})

如果监听的是reactive

let data = reactive({})
watch(() => data, (val, old) => {}, { deep: true })

watchEffect

这个函数只会触发一次，可以监听多个值，只要这个值写在这里，程序就会自动的触发一次。

vuex

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

差异

由createStore函数创建store实例
组件内使用store使用useStore高阶函数得到store对象

持久化插件

vuex-persister

vue3代码的组件内抽离优化【组件瘦身】

可以抽离数据和方法到外部js中，但是对于props，store，生命周期和router的初始化不可以抽离。

组件通信

父传子，子组件使用defineProps函数接收
子传父，子组件使用defineEmits函数接收
v-model升级成可以绑定多个
子组件向父组件主动暴露数据，使用defineExpose函数

vue-router

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

组件内获取路由实例使用 useRouter函数初始化

组件内获取当前路由对象 useRoute函数初始化

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

使用的当前组件

虚拟dom和diff算法

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

h() 创建虚拟dom

{ type: "div", props: [ 'id', 'class' ], children: "123" or children: { type: "p" } or [{},{}] }

语法：h('标签类型', { id: "", class:

vue3和vuex的小总结