2022 年 8月随笔档案 - LotusFlower

Vue3系列12--keep-alive缓存组件

摘要：有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。开启keep-alive 生命周期的变化. 初次进入时： onMounted> onActivated 退出后触发 deact 阅读全文

posted @ 2022-08-11 21:09 LotusFlower 阅读(1226) 评论(0) 推荐(1) 编辑

Vue3系列11--Teleport传送组件

摘要：Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术，不受父级style、v-show等属性影响，但data、prop数据依旧能够共用的技术；类似于 React 的 Portal。主要解决的问题因为Teleport节点挂载在其他指定的DOM节点下，完全不阅读全文

posted @ 2022-08-10 18:23 LotusFlower 阅读(320) 评论(0) 推荐(0) 编辑

Vue3系列10--异步组件&代码分包&suspense

摘要：异步组件在大型应用中，我们可能需要将应用分割成小一些的代码块并且减少主包的体积，这时候就可以使用异步组件顶层 await：在setup语法糖里面使用方法，<script setup> 中可以使用顶层 await。结果代码会被编译成 async setup() 在项目进行打包后会生成打包后的阅读全文

posted @ 2022-08-09 19:15 LotusFlower 阅读(426) 评论(0) 推荐(0) 编辑

Vue3系列9--插槽slot

摘要：插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。 1 匿名插槽 (1) 在子组件放置一个插槽,mytest.vue <template> <di 阅读全文

posted @ 2022-08-08 18:05 LotusFlower 阅读(251) 评论(0) 推荐(0) 编辑

Vue3系列8--全局组件，局部组件，递归组件

摘要：1 配置全局组件当一个组件使用频率非常高的时候，可以考虑设置其为全局组件，方便其他地方调用。案例我这儿封装一个Card组件想在任何地方去使用： <template> <div class="card"> <div class="card-header"> <div>主标题</div> <div 阅读全文

posted @ 2022-08-07 19:26 LotusFlower 阅读(732) 评论(0) 推荐(0) 编辑

Vue3系列7--父子组件传参

摘要：1 父组件传递给子组件父组件通过v-bind绑定一个数据，然后子组件通过defineProps接受传过来的值。 <template> <div class="layout"> <Menu v-bind:data="data" title="我是标题"></Menu> // 传递字符串的时候可以不需阅读全文

posted @ 2022-08-06 22:16 LotusFlower 阅读(476) 评论(0) 推荐(0) 编辑

Vue3系列6--watch侦听器和watchEffect高级侦听器

摘要：1 watch侦听器 watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用 watch第一个参数监听源 watch第二个参数回调函数cb（newVal,oldVal） watch第三个参数一个options配置项是一个对 { immediate:true //是否立即调用一次 deep: 阅读全文

posted @ 2022-08-05 22:44 LotusFlower 阅读(224) 评论(0) 推荐(0) 编辑

Vue3系列5--computed计算属性

摘要：1 computed用法计算属性就是当依赖的属性的值发生变化的时候，才会触发他的更改，如果依赖的值，不发生变化的时候，使用的是缓存中的属性值。函数形式 import { computed, reactive, ref } from 'vue' let price = ref(0)//$0 let 阅读全文

posted @ 2022-08-05 19:52 LotusFlower 阅读(291) 评论(0) 推荐(0) 编辑

Vue3系列4--ref和reactive响应式

摘要：本节主要介绍了响应式变量和对象，以及变量和对象在响应式和非响应式之间的转换。阅读全文

posted @ 2022-08-04 18:46 LotusFlower 阅读(311) 评论(0) 推荐(0) 编辑

Vue3系列3--模板语法和vue指令

摘要：1 模板插值语法在script 声明一个变量可以直接在template 使用用法为{{变量名称}} 模板语法是可以编写条件运算的运算也是支持的操作API 也是支持的 <template> {{ message }} {{ message2==0 ? '我是老大' : '我笑的' }} {{ m 阅读全文

posted @ 2022-08-04 16:10 LotusFlower 阅读(204) 评论(0) 推荐(0) 编辑

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

推荐排行榜