vue3的知识点
2023-07-06 08:37:20 0 举报AI智能生成
vue3 的基本笔记
作者其他创作
大纲/内容
1·v2双向数据绑定是object。definedPropert方法结合发布订阅模式来实现 但他只能监听某个属性 不能对全对象监听
2·v3使用了es6中的proxy和reflectApl对数据代理通过reactive函数给每个对象都包了一层proxy通过proxy监听属性变化 从而实现对数据的监控
3·v2是单根节点 v3是多跟节点
4·v2zhong的new出的实例对象 都是在vue身上的 这样就算是没有用也会跑一边 造成性能消耗用户体验不好
4·v3是model import按需引入 不仅开发便捷 减少性能消耗 用户体验良好
响应式原理
v3 setup
v2 beforeCreate
setp
created
onBeforeMount
beforemount
onMounted
mounted
onBeforeUpdate
beforeUpdate
onUpdated
updated
beforeUnmount
beforeDestory
unmounted
destoreds
生命周期
v2是选项是类型API
v3是组合式API
数据方法
v3的cacheHandler可在第一次渲染后缓存我们的事件相比对于v2无需每次渲染都传递一个新函数
事件缓存
vue2和vue3的区别
https://aaidokpuk3r.feishu.cn/docx/TNrWda34uoEnI1xXRYIc8wUtnnb 区别文档链接
onBeforeMount组件挂载之前调用
onMounted 组件挂载完以后执行
onBeforeUnmount实例被卸载之前调用
onUnmounted实例卸载以后调用
onBeforeUpdate更新Dom树之前调用
onUpdateed更新Dom树之后执行
onErrorCaptured在捕获组件传递错误时调用
onPenderTracked组件渲染过程中追踪到响应式依赖时调用（仅在开发中使用 服务器端渲染期间不会调用
onRenderTiggered当响应式依赖的变更触发了组件渲染时间时调用（同上）
onActivated如果组件时keepAlive缓存树的一部分时 当组件被插入到Dom中时调用
onDeactivated如果组件时keepAlive缓存树的一部分时 组件从Dom中移除时调用
onServerPrefetch 注册一个异步函数 在组件实例渲染到服务器之前调用
vue3的生命周期
ref支持基础类型
reactive支持对象类型
computed计算属性
他在监听reactive的时候没有旧值也可以直接深度监听
watch第一个值 监听谁 第二个值触发后调用的函数 第三个值是配值
watch监听属性
作用：创建一个对象 让他的value指向另一个对象中某个属性 这两个功能一致就是toRef是单个的toRefs是批量的
toRef和toRefs的作用
创建一个自定义的ref并对其依赖项跟踪和更新
customRef
vue3中支持的类型
provide是父 它可以传递给祖孙参数等
inject是孙子用的他是接受传递过两的值
provide和inject
isRef检查是否为refduix
isReactive检查一个对象是否由redonly只读代理
isReadonly检查对象是否由reactive创建的响应代理
isProxy检查一个对象是否由readonly或者renctive代理
用来判断类型的
在v2中组件必须有一个标签
在vue3中组件可以没有跟标签 内部会将多个标签包含在一个fragemt虚拟元素中
好处：减少标签属性 减少内存占用
fragment组件
是一种能够将我们的组件html结构移动到指定位置的技术
<teleport to='位置' ></teleport> :位置可以是body中的
teleprot
vue3的知识点
0 条评论
回复 删除
下一页
