Vue3.

vue3

npkill 快速删除项目当中的node_modules

• 安装:npm i -g npkill

• 使用: npkill 敲空格确认删除，退出按Q

vite

vite的特点

• 快，比webpack快10倍

• 原理是它是基于script标签的type属性值的module模块化，让浏览器去做了80%的解析，webpack的解析完全依赖于node.js解析，所以webpack相对vite来说，耗时长。

创建一个vite项目

• npm create vite@latest

命令

• npm run dev开起开发环境

• npm run build 开启生产环境--打包

语法

变化

• template 标签里的语法一点没变

• style 也没变

• script 语法有变化

底层改变了什么？

1. vue3使用es6的proxy做数据的劫持，更好，更快，更强大。

2. 虚拟dom上自动添加补丁，每一个元素都有一个默认添加的key，v-for不用再加key了。

3. vue2的选项模式（面向对象形式），vue3是组合模式（函数式编程），所以vue3打包之后的体积更小。按需引入

ref和reactive

1. ref 两种方法：1 用于声明基本数据类型的值，2 用于绑定dom对象。ref在js中使用，需要点value，在dom中使用则不行

2. reactive 用于声明引用数据类型的值，可以使用toRefs来解构成ref值使用。

3. 关系是：reactive底层使用的是ref的实现。

4. 他们俩基本上替代了vue2中的data。

setup

• setup函数，为了平滑的从vue2语法平滑过度到vue3语法，在对象配置里使用setup函数

• setup属性，最后setup成为了script标签的属性，只要标签中声明的引入的一切资源都可以直接使用。

• setup特性，它本身就替代了声明周期里的创建阶段，所以没有this

生命周期

vue2

1. beforeCreate 创建前

2. Created 创建完成

3. beforeMounte 挂载前

4. mounted 挂载完成

5. beforUpdate 更新前

6. updated 更新完成

7. beforeDestroy 销毁前

8. destroyed 销毁后

vue3

1. vue3的创建阶段就是setup属性替代了

2. onBeforeMount 挂载前 【记录一个用户的访问信息-时间-ip-网络-设备类型】

3. onMounted 挂载后 【*用于发起页面加载完成后的第一次自动请求数据】

4. onBeforeUpdate 更新前

5. onUpdated 更新后 【观测更新后的数据】

6. onBeforeUnmount 卸载前 【*用于清除掉全局的定时器，变量，闭包等等】

7. onUnmounted 卸载后 【背后做日志的上传工作】

computed和watch

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

1. 声明一个只读的计算属性

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

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

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

watch

1. 监听一个数据

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

1. 监听多个数据

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

1. 如果监听的是reactive

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

watchEffect

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