摘要:keep-alive 是 Vue 的一个内置抽象组件,通常用于缓存动态组件或路由组件。 被 keep-alive 包裹的组件在切换时不会被销毁,而是会被缓存下来,下一次切换回这个组件时,会直接复用之前的实例,保持其状态。 keep-alive的几个配置属性和钩子: 1.include 和 exclu
阅读全文
摘要:用于在组件树中传递数据的机制,它们允许祖先组件将数据注入到后代组件中,而不需要通过 props 层层传递。 当父组件通过 provide 提供一个响应式数据源时,任何使用 inject 注入该数据源的子组件都会自动接收到更新后的数据 TIPS :你如果传递普通的值 是不具有响应式的 需要通过ref
阅读全文
摘要:异步组件:通过延迟加载组件,只有在需要时才会加载它们。 异步组件在大型应用程序中非常有用,因为它们可以减少初始加载时间,并按需加载部分代码。 异步组件的常见使用场景 路由懒加载:在大型单页应用中,将路由对应的组件设置为异步组件,以减少初始加载时间。 按需加载:当页面中某些组件只有在用户触发特定操作时
阅读全文
摘要:1.Vue3 副作用函数(onMounted、watchEffect) 帮助管理组件中的副作用逻辑,并自动追踪其依赖关系,以确保在数据变化时能够自动触发副作用函数的更新。 会自动追踪被其内部函数引用的响应式数据。当这些数据发生变化时,Vue 3 会自动重新运行副作用函数,确保副作用与数据的状态保持同
阅读全文
摘要:使用 :deep() 替换 ::v-deep .carousel { // Vue 2.0 写法 // ::v-deep .carousel-btn.prev { // left: 270px; // } // Vue 3.0 更改为以下写法 :deep(.carousel-btn.prev) {
阅读全文
摘要:1.props 父组件传参不变,子组件接收: 通过defineProps 来接受, 无需额外引入,直接使用 <template> <div class="menu"> 菜单区域 {{ title }} <div>{{ data }}</div> </div></template> <script s
阅读全文
摘要:1.默认插槽还是跟以前一样 2.使用具名插槽时,子组件不变 以前的父组件掉用的时候 <template slot="example"> </template> 现在为 <template v-slot:example> </template> 或者 <template #example> </tem
阅读全文
摘要:1.虚拟dom dom就是html文件里内容,一个页面由多个dom组成 <ul class="lists"> <li class="item">li1</li> <li class="item">li2</li> </ul> 而对应的虚拟dom是 tag: 'ul', attrs: { classN
阅读全文
摘要:1.setup 函数没有this属性,this为undefined 2.其生命周期在 beforeCreate 和 Created 两个钩子函数之前 3.要return一个函数出来(与react一样,setup忽略) 4.ref用于基本数据类型变成响应式,在函数类获取值为x.value, ref支持
阅读全文