slot全家桶
摘要：<template> <SlotComponent> <!-- <template v-slot>123</template> --> <template #default>不同写法</template> <!-- <template v-slot:middle>456</template> -->
阅读全文
posted @ 2025-02-04 17:38
随笔分类 - vue3 / learn
component的is写法优化
摘要：<template> <component :is='component'></component> </template> <script setup lang='ts'> import { ref, shallowRef } from 'vue' import A from './A.vue'
阅读全文
posted @ 2025-02-04 16:38
组件全局注册和递归调用
摘要：import { createApp } from 'vue' import './style.css' import App from './App.vue' import SelfComponent from './study/selfComponent/component.vue' const
阅读全文
posted @ 2025-02-02 20:09
defineProps,defineEmits,defineExport
摘要：<template> <PropsEmitExport ref="propsEmitExportRef" :father="'标题'" @toFatherEmit="getChildData" @toFastherEmits="getChildDataTwo"></PropsEmitExport>
阅读全文
posted @ 2025-02-02 19:21
bem函数
摘要：$name-space: 'study-7bem'; // 例如element的类名中都有el $block-sel: '-'; // 例如el-中的- $element-sel: '———'; //例如element中对元素添加类名的时候使用的是——— $modfier-sle: '--'; //
阅读全文
posted @ 2025-02-02 16:47
生命周期
摘要：main.vue <template> <div @click="isShow">显隐</div> <componentA v-if="!flag"></componentA> </template> <script setup lang='ts'> import { ref } from 'vue
阅读全文
posted @ 2025-01-31 17:39
watchEffect
摘要：<template> <div> <input type="text" v-model="name" /> <div id="beWatch"></div> <!-- <button @click="stopEffect">停止</button> --> </div> </template> <sc
阅读全文
posted @ 2025-01-31 16:19
watch
摘要：<template> <div> <input type="text" v-model="name" /> <input type="text" v-model="obj.age" /> <input type="text" v-model="refName.age" /> </div> </tem
阅读全文
posted @ 2025-01-31 15:45
vue3 响应式原理源码
摘要：1.使用Proxy来编码reactive源码，在get函数中追踪依赖，在set函数中触发依赖 2.编写track和trigger，和自定义effect函数 构建依赖图根据这种数据结构 3.使用自定义的reactive函数和自定义effect函数
阅读全文
posted @ 2025-01-31 15:44
computed
摘要：<template> <div> <h1>{{ firstName }}</h1> <h1>{{ lastName }}</h1> <br> <h2>{{ fullName }}</h2> <!-- <button type="submit" @click="update">修改</button>
阅读全文
posted @ 2025-01-30 15:50
toRef,toRefs,toRaw
摘要：<template> <div @click="change"> {{ originObj }} -- {{ reactObj }} {{ toOrigin }} -- {{ toReactRef }} -- {{ toReactRefs }} </div> </template> <script
阅读全文
posted @ 2025-01-30 15:50
reactive
摘要：<template> <h1>{{ obj.count }}</h1> <h1>{{ shallowObj }}</h1> <button @click="change">change</button> </template> <script setup lang="ts"> import { re
阅读全文
posted @ 2025-01-30 15:49
ref
摘要：<template> <h1 @click="addCount">{{ count }}</h1> <h1 @click="addCountObj">{{ countObj.count }}</h1> <div ref="divRef"></div> </template> <script setu
阅读全文
posted @ 2025-01-30 15:46
