生命周期
摘要：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
01 2025 档案
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
