vue3的生命周期【computed和watch的区别】

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 语法有变化

底层改变里什么？

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. beforeMount 挂载前
4. mounted 挂载完成
5. beforeUpdate 更新前
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

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

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

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

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

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

watch

1. 监听一个数据

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

1. 监听多个数据

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

1. 如果监听的是reactive

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

watchEffect

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