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

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

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

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

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

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

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

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

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

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