学习目标:
- 掌握 3.0知识
学习内容:
1.生命周期的变化
整体来看,变化不大,只是名字大部分需要 + on,功能上类似。使用上 Vue3 组合式 API 需要先引入;Vue2 选项 API 则可直接调用,如下所示。
Tips: setup
是围绕beforeCreate
和created
生命周期钩子运行的,所以不需要显式地去定义。
setup() :开始创建组件之前,在beforeCreate和created之前执行。创建的是data和method
onBeforeMount() : 组件挂载到节点上之前执行的函数。
onMounted() : 组件挂载完成后执行的函数。
onBeforeUpdate(): 组件更新之前执行的函数。
onUpdated(): 组件更新完成之后执行的函数。
onBeforeUnmount(): 组件卸载之前执行的函数。
onUnmounted(): 组件卸载完成后执行的函数
若组件被包含,则多出下面两个钩子函数。
onActivated(): 被包含在中的组件,会多出两个生命周期钩子函数。被激活时执行 。
onDeactivated(): 比如从 A组件,切换到 B 组件,A 组件消失时执行。
————————————————
2.响应式原理
Vue2使⽤的是Object.defineProperty()进⾏数据劫持,结合发布订阅的⽅式实现。
Vue3使⽤的是Proxy代理,使⽤ref或者reactive将数据转化为响应式数据
在Vue2的响应式中,存在着新增属性,删除属性以及直接通过下标修改数组,但页面不会自动更新的问题。但是在Vue3中,这些问题都得以解决。
实现原理:
通过Proxy(代理): 拦截对象中任意属性的变化,包括:属性值的读写,属性的增加,属性的删除等。
通过Reffect(反射): 对源对象的属性进行操作
const p = new Proxy(target, handler)
参数:
target:
要使用 Proxy 包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。
handler:
一个通常以函数作为属性的对象,各属性中的函数分别定义了在执行各种操作时代理 p 的行为。
————————————————
3.虚拟dom
4.多根节点
5.监听的变化
6.定义全局变量的方法变化
7.插槽使用变化
8.v-model 升级
9.异步组件的使用
Vue3 提供 Suspense组件,允许程序在等待异步组件时渲染兜底的内容,如 loading ,使用户体验更平滑。使用它,需在模板中声明,并包括两个命名插槽:default和fallback。Suspense确保加载完异步内容时显示默认插槽,并将fallback插槽用作加载状态。
Tips: 真实的项目中踩过坑,若想在 setup 中调用异步请求,需在 setup 前加async
关键字。这时,会受到警告async setup() is used without a suspense boundary
。
解决方案:在父页面调用当前组件外包裹一层Suspense
组件。
Teleport
Vue3 提供Teleport
组件可将部分DOM移动到 Vue app之外的位置。比如项目中常见的Dialog
组件。
————————————————
10.移除filter(过滤器)
11..v-if 与 v-for 的优先级调整
12.事件缓存
13.组件传值
学习产出:
提示:这里统计学习计划的总量
例如:
- 技术笔记 2 遍
- CSDN 技术博客 3 篇
- vlog 视频 1 个