摘要: 视频 3.Suspense 等待异步组件时渲染一些额外内容,让应用有更好的用户体验 使用步骤: 异步引入组件 import {defineAsyncComponent} from 'vue' const Child = defineAsyncComponent(()=>import('./compo 阅读全文
posted @ 2023-04-23 22:48 垂序葎草 阅读(20) 评论(0) 推荐(0) 编辑
摘要: 视频 2.Teleport 什么是Teleport?—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。 <teleport to="移动位置"> <div v-if="isShow" class="mask"> <div class="dialog"> <h3>我是一个 阅读全文
posted @ 2023-04-23 22:28 垂序葎草 阅读(26) 评论(0) 推荐(0) 编辑
摘要: 视频 五、新的组件 1.Fragment 在Vue2中: 组件必须有一个根标签 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中 好处: 减少标签层级, 减小内存占用 阅读全文
posted @ 2023-04-23 18:46 垂序葎草 阅读(134) 评论(0) 推荐(0) 编辑
摘要: 视频 四、Composition API 的优势 1.Options API 存在的问题 使用传统OptionsAPI中,新增或者修改一个需求,就需要分别在data,methods,computed里修改 。 2.Composition API 的优势 我们可以更加优雅的组织我们的代码,函数。让相关 阅读全文
posted @ 2023-04-23 18:35 垂序葎草 阅读(14) 评论(0) 推荐(0) 编辑
摘要: 视频 6.响应式数据的判断 isRef: 检查一个值是否为一个 ref 对象 isReactive: 检查一个对象是否是由 reactive 创建的响应式代理 isReadonly: 检查一个对象是否是由 readonly 创建的只读代理 isProxy: 检查一个对象是否是由 reactive 或 阅读全文
posted @ 2023-04-23 18:28 垂序葎草 阅读(42) 评论(0) 推荐(0) 编辑
摘要: 视频 5.provide 与 inject 作用:实现祖与后代组件间通信 套路:父组件有一个 provide 选项来提供数据,后代组件有一个 inject 选项来开始使用这些数据 具体写法: 祖组件中: setup(){ ...... let car = reactive({name:'奔驰',pr 阅读全文
posted @ 2023-04-23 18:19 垂序葎草 阅读(40) 评论(0) 推荐(0) 编辑
摘要: 视频 4.customRef 作用:创建一个自定义的 ref,并对其依赖项跟踪和更新触发进行显式控制。 实现防抖效果: <template> <input type="text" v-model="keyword"> <h3>{{keyword}}</h3> </template> <script> 阅读全文
posted @ 2023-04-23 18:04 垂序葎草 阅读(17) 评论(0) 推荐(0) 编辑
摘要: 视频 3.toRaw 与 markRaw toRaw: 作用:将一个由reactive生成的响应式对象转为普通对象。 使用场景:用于读取响应式对象对应的普通对象,对这个普通对象的所有操作,不会引起页面更新。 markRaw: 作用:标记一个对象,使其永远不会再成为响应式对象。 应用场景: 有些值不应 阅读全文
posted @ 2023-04-23 17:40 垂序葎草 阅读(39) 评论(0) 推荐(0) 编辑