开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 9 天，点击查看活动详情
前言
不甘于平庸又不努力
2023继续！！！
vue3开始了！！！
watch watchEffect 及区别
- watch: 既要指明监视的属性，也要指明监视的回调
- watchEffect: 不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。
- 相同点
- 两者都可以监听data属性变化
- 不同点
| watch | watchEffect |
|---|---|
| 需要明确监听哪个属性，默认是惰性执行 | 会根据其中的属性，自动监听其变化 |
生命周期
v2生命周期：
| 生命周期名 | 概念 |
|---|---|
| beforeCreate | 组件实例被创建之初，组件的属性生效之前 |
| created | 组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，$el 还不可用 |
| beforeMount | 在挂载开始之前被调用：相关的 render 函数首次被调用 |
| mounted | el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子 |
| beforeUpdate | 组件数据更新之前调用，发生在虚拟 DOM 打补丁之前 |
| update | 组件数据更新之后 |
| activited | keep-alive 专属，组件被激活时调用 |
| deadctivated | keep-alive 专属，组件被销毁时调用 |
| beforeDestory | 组件销毁前调用 |
| destoryed | 组件销毁后调用 |
V3生命周期：
| 生命周期名 | 概念 |
|---|---|
| setup() | 开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method |
| onBeforeMount() | 组件挂载到节点上之前执行的函数。 |
| onMounted() | 组件挂载完成后执行的函数。 |
| onBeforeUpdate() | 组件更新之前执行的函数。 |
| onUpdated() | 组件更新完成之后执行的函数。 |
| onBeforeUnmount() | 组件卸载之前执行的函数。 |
| onUnmounted() | 组件卸载完成后执行的函数 |
| onActivated() | 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行。 |
| onDeactivated() | 比如从 A 组件，切换到 B 组件，A 组件消失时执行。 |
| onErrorCaptured() | 当捕获一个来自子孙组件的异常时激活钩子函数。 |
对比v2 vs v3
| Vue2 | vue3 |
|---|---|
| beforeCreate | setup() |
| created | setup() |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestroy | onBeforeUnmount |
| destroyed | onUnmounted |
| activated | onActivated |
| deactivated | onDeactivated |
| errorCaptured | onErrorCaptured |
Composition API如何实现代码逻辑复用
三个步骤：
- 抽离逻辑代码到一个函数
- 函数命名为useXxxx
- 在setup中引用useXxxx 复用函数的组件：useXxxx
function useXxxx(){
//写逻辑代码
}
export default useXxxx
父组件
import useXxxx from "./useXxxx";
export default{
setup() {
const xx = useXxxx()
return {xx}
}
}
v3比v2为啥快
为啥快
-
换成了
proxy响应式 -
PatchFlag(标记)
-
hoistStatic(静态提升)
-
cacheHandler（缓存）
-
SSR优化
-
tree-shaking
V3优势有 1. 性能更好 2. 体积更小 3. 更好的TS支持 4. 更好的代码组织 5. 更好的逻辑抽离 6. 更好新功能
PatchFlag(标记)
编译模板时，动态节点做标记；diff算法时，可以区分静态节点以及不同类型的动态节点。
diff算法的时候 只比较有标记的节点
hoistStatic(静态提升)
- 将静态节点的定义，提升到父作用域，缓存起来
- 多个相邻静态节点，会被合并起来
- 典型的拿空间换时间的优化策略
Tree-Shaking Support（按需编译）
静态分析并删除未使用的导出相关的代码
Fragment片段
v3中可以支持多个根节点
Vite是什么
前端打包工具；
优势：开发环境下无需打包，启动超快
语法糖内的defineEmits、defineExpose及defineProps
defineEmits
相当于V2中的this.$emit()
defineExpose
可以将子组件中的方法暴露给父组件
父组件
<son ref='son'></son>
setup(){
const sonRef = ref(null)
const handleClick = ()=>{
sonRef.value.detail() // 使用子组件的方法
}
}
子组件
setup(){
detail(){}
defineExpose({detail})
}
defineProps
相当于V2中的props 子组件接收父组件穿的参数
后记
本文仅作为自己一个阅读记录，具体还是要看大佬们的文章
