Xiuji957

Teleport传送组件Teleport Vue 3.0新特性之一。 Teleport 是一种能够将我们的模板渲染至指定DOM节点，不受父级style、v-show等属性影响，但data、prop数据依旧能够共用的技术；类似于 React 的 Portal。 主要解决的问题 因为Teleport节点挂载在其他指定的DOM节点下，完全不受父级style样式影响。 定义一个绝对定位的弹出框，倘若父元素中有position:relative属性，该弹出层的位置会相对于父元素改变 123456789101112131415161718192021222324252627<!-- * @Description: * @Author: xiuji * @Date: 2022-09-14 16:38:57 * @LastEditTime: 2022-09-14 16:40:32 * @LastEditors: Do not edit--><template> <div class="dialog"> </div>< ...

异步组件、代码分包、suspensevue项目打包后生成dist文件，第三方依赖会集成在vendor.js文件中，应用自身的内容会集成在index.js文件中，大型应用index.js文件会随着业务的拓展越来越大，目前SPA单页应用常见的首屏加载白屏与此有很大关系。 通过异步组件将大型应用分割成小一些的代码块，并且减少主包的体积，完成性能优化，能够优化首页加载速度。使用异步组件后打包构建的dist文件如下： 应用被拆分成不同的index文件。 使用异步组件子组件中数据来自于请求后台服务获取的异步数据 123456789101112131415161718192021<!-- * @Description: * @Author: xiuji * @Date: 2022-09-14 15:20:50 * @LastEditTime: 2022-09-14 15:44:32 * @LastEditors: Do not edit--><template> <div> <div v-for="(i,k) in l ...

插槽子组件中通过slot标签定义插槽插入的位置,slot标签相当于一个占位符； 插槽分为匿名插槽、具名插槽、动态插槽、作用域插槽 123456789101112131415161718192021222324252627282930313233343536373839404142434445<!-- * @Description: * @Author: xiuji * @Date: 2022-09-07 17:49:20 * @LastEditTime: 2022-09-12 16:06:36 * @LastEditors: Do not edit--><template> <div class="slot"> <header class="header"> <!-- slot标签相当于一个占位符 --> <slot name="header"></slot> // 具名插槽 ...

动态组件动态组件常用来做tab切换 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566<template> <div class="content"> <div class="content-tabs"> <div v-for="(i, k) in tabList" :key="k" class="content-tabs-box" @click="changeTab(i)"> {{ i.name }} </div> </div> <component :is="current.comName&q ...

全局组件、局部组件，递归组件1、 全局组件components下创建组件 main.ts中引入组件并将组件注册在vue实例上 123import Card from './components/Card/index.vue'// 全局组件注册应该绑定在mount之前createApp(App).component('Card', Card).mount('#app') 2、 局部组件vue3中局部组件引用方式与vue2相同 3、 递归组件本质是自己调用自己，到达限定条件后结束 12345678910111213141516171819202122232425262728293031<template> <div class="tree"> <div v-for="(i, k) in data" :key="k" class="tree- box" @click.stop="click ...

父子组件传参子组件中直接使用defineProps 来默认接收父组件传过来的参数 12345type Props = { name:string, content:string}defineProps<Props>() // 范型中定义的属性可以直接在子组件中使用 withDefault方法定义默认props参数,withDefault方法接收两个参数，第一个参数固定defineProps(),第二个参数是个对象，定义默认参数 1234567891011<script setup lang="ts"> type Props = { name?:string, content?:string, list?: () => [] // 复杂数据类型需要通过函数方式return出去，否则控制台会报错 } withDefault(defineProps<Props>(),{ name:'我是默认name', content ...

生命周期123456onBeforeMount, // 创建之前，获取不到dom元素onMounted, // dom元素渲染完成onBeforeUpdate, // 更新之前onUpdated, // 更新之后onBeforeUnmount, // 卸载之前onUnmounted, // 卸载完成

watchEffect高级监听属性立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。 如果用到message 就只会监听message 就是用到几个监听几个 而且是非惰性 会默认调用一次 123456789let msg = ref<string>('飞机')let msg1 = ref<string>('火车')watchEffect(() => { console.log('选择监听', msg.value); console.log('选择监听', msg1.value); // 明示具体监听哪个属性}) 清除副作用：在触发监听之前会调用一个可以处理业务逻辑的函数，例如防抖 1234567watchEffect((test) => { test(() => { console.log('清除副作用') }) console.log(' ...

watch监听属性watch一共三个参数 第一个参数：监听的数据源； 123456789101112let st = ref({ nav: { tag: { name: 'test' } }})watch(st,(newVal,oldVal) => { // 第一个参数可为数组，同时监听多个参数 console.log('新的', newVal); console.log('旧的', oldVal);}) 第二个参数：回调函数（newVal,oldVal）newVal变化后的数据，oldVal变化前的数据； 第三个参数： 1234{ immediate:true, // 是否立刻调用一次 deep:true // 是否开启深度监听} 监听复杂数据类型的响应式数据 123456789101112131415161718<input type="text" v-mo ...

computed计算属性当依赖的属性的值发生变化的时候，才会触发他的更改，如果依赖的值，不发生变化的时候，使用的是缓存中的属性值 1234567let $total = ref<number>(0) //定义一个number类型的响应式数据，默认值为0$total = computed<number>(() => { // computed返回值为number类型 return obj.reduce((prev, next) => { return prev + (next.num * next.price) }, 0)})