![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue3
空投在我怀里
这个作者很懒,什么都没留下…
展开
-
vue3笔记10之“provide 与 inject“祖与后代组件间通信
作用:实现祖与后代组件间通信 父传子套路:父组件有一个 provide 选项来提供数据,后代组件有一个 inject 选项来开始使用这些数据祖组件中:后代组件中:原创 2022-06-15 13:40:18 · 215 阅读 · 0 评论 -
vue3笔记9之“customRef“防抖
作用:创建一个自定义的 ref,并对其依赖项跟踪和更新触发进行显式控制。实现防抖效果原创 2022-06-15 13:39:38 · 181 阅读 · 0 评论 -
vue3笔记8之“toRaw 与 markRaw“
一、其它 Composition APItoRaw 与 markRawtoRaw作用:将一个由reactive生成的响应式对象转为普通对象。使用场景:用于读取响应式对象对应的普通对象,对这个普通对象的所有操作,不会引起页面更新。markRaw作用:标记一个对象,使其永远不会再成为响应式对象。应用场景:有些值不应被设置为响应式的,例如复杂的第三方类库等。当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能。...原创 2022-06-15 13:39:03 · 187 阅读 · 0 评论 -
vue3笔记7之“readonly 与 shallowReadonly“
一、其它 Composition APIreadonly: 让一个响应式数据变为只读的(深只读)。shallowReadonly:让一个响应式数据变为只读的(浅只读)。应用场景: 不希望数据被修改时。原创 2022-06-15 13:38:19 · 158 阅读 · 0 评论 -
vue3笔记6之“toRef、shallowReactive 与 shallowRef浅响应式“
作用:创建一个 ref 对象,其value值指向另一个对象中的某个属性。语法:const name = toRef(person,'name')应用: 要将响应式对象中的某个属性单独提供给外部html使用时。扩展:toRefs与toRef功能一致,但可以批量创建多个 ref 对象,语法:toRefs(person)shallowReactive:只处理对象最外层属性的响应式(浅响应式)。shallowRef:只处理基本数据类型的响应式, 不进行对象的响应式处理。什么时候使用?如果有一个对象数据,结构比原创 2022-06-15 13:37:40 · 222 阅读 · 0 评论 -
vue3笔记5之“生命周期、复用的hook”
一、生命周期Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名:beforeDestroy改名为 beforeUnmount销毁之前-在事件里面的所有对数据的更改,都不会对数据进行更新(一般,关闭定时器,取消订阅消息、解绑自定义事件等收尾操作)destroyed改名为 unmounted 销毁之后-没什么用,被忽略2.可以直接已配置项的形式使用生命周期钩子,也可以使用组合式API的形式使用,尽量统一一般来说,组合式API里的钩子会比配置项的钩子先执行,组合式API的钩子名字有变化Vu原创 2022-06-15 13:37:07 · 1190 阅读 · 0 评论 -
vue3笔记4之“计算属性、监听、watchEffect“
一、计算属性与监视1.计算属性:与Vue2.x中computed配置功能一致写法:2.watch函数与Vue2.x中watch配置功能一致两个小“坑”:监视reactive定义的响应式数据时:oldValue无法正确获取、强制开启了深度监视(deep配置失效)。监视reactive定义的响应式数据中某个属性时:deep配置有效。情况一:监视ref定义的响应式数据如果用ref定义了一个对象或者这样情况二:监视多个ref定义的响应式数据情况三:监视reactive定义的响应式数据若原创 2022-06-15 13:36:36 · 169 阅读 · 0 评论 -
vue3笔记3之“默认插槽、具名插槽”
一、插槽默认插槽子组件父组件2.具名插槽原创 2022-06-15 13:36:03 · 185 阅读 · 0 评论 -
vue3笔记2之“组合函数、setup的2个注意点、reactive和ref3个区别”
一、Composition API1.组合式 API在Vue2中,我们使用的是Options API ,配置项式的API,我们要创建一个Vue实例,然后在里面传入一个配置对象,里面要写data、methods、watch等的东西,而Vue3提出了全新的 Composition API,组合式API,我们不用直接创建Vue实例,而是创建一个app,然后按需引入需要的API,来进行使用...2.Options API 存在的问题使用传统Options API(配置式API)中,新增或者修改一个需求,就需要分别在原创 2022-06-15 13:35:28 · 476 阅读 · 0 评论 -
vue3笔记1之‘优势、创建、新特性、目录结构’
一、vue3的优势性能的提升打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%2.源码的升级使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking3.拥抱TypeScriptVue3可以更好的支持TypeScript二、新的特性1.Composition API(组合API)setup配置ref与reactivewatch与watchEffectprovide与 inject2.新的内置组件FragmentTeleportSuspense3原创 2022-06-15 13:35:00 · 144 阅读 · 0 评论