vue3之定义数据
- 只是用于展示的数据(非响应式数据)
- 响应式数据 (Ref全家桶)
- - 定义简单数据类型
  - 判断是否为 ref对象(定义为响应式数据对象)
  - shallowRef 定义简单数据类型的响应式
  - shallowRef 不能和ref 同时使用
  - customRef
  - - 实现类似计算属性
    - 封装一个防抖函数
- ref 设置获取dom节点

vue3之定义数据

只是用于展示的数据(非响应式数据)

常规的定义变量，这是不具有响应式的，也就是无法更改当前的试图的值

<template><div><div><button @click="changeMsg">修改msg</button>{{ msg }}</div></div>
</template><script setup lang="ts">
// 这定义的变量 只是用于显示 不具有响应式
let msg: String = '菜鸡'
const changeMsg = () => {msg = '我是修改的msg'
}
</script>

效果

响应式数据 (Ref全家桶)

定义简单数据类型

使用ref定义简单数据类型具备响应式效果
使用 Ref来限制当前msg的数据类型

<template><div><div><button @click="changeMsg">修改msg</button><div>{{ msg2 }}</div></div></div>
</template><script setup lang="ts">
import { ref, Ref, reactive } from 'vue'
let msg2: Ref<String> = ref('菜鸡2')
const changeMsg = () => {msg2.value = '我是修改的msg2'
}
</script>

效果

判断是否为 ref对象(定义为响应式数据对象)

<template><div><div><button @click="changeMsg">修改msg</button><div>{{ msg2 }}</div></div></div>
</template><script setup lang="ts">
import { ref, Ref, isRef, reactive } from 'vue'
let msg2: Ref<String> = ref('菜鸡2')
const msg: Number = 1
const changeMsg = () => {msg2.value = '我是修改的msg2'console.log('判断是否为 ref定义的响应式数据', isRef(msg2)) // 判断是否为 ref定义的响应式数据 trueconsole.log('判断是否为 ref定义的响应式数据', isRef(msg)) // 判断是否为 ref定义的响应式数据 false
}
</script>

shallowRef 定义简单数据类型的响应式

shallowRef：只处理简单数据类型的响应式, 不进行对象的响应式处理。
使用场景：
方式1
- 直接修改表层的对象的数据，这是可以被监测到的响应式数据

<template><div><div><button @click="changeMsg2">修改msg2</button><div>msg2 -- {{ msg2 }}</div></div></div>
</template><script setup lang="ts">
import { shallowRef, triggerRef } from 'vue'
// 使用shallowRef 定义的数据，只是表层具有响应式的，里层的数据则是没有响应式的
let msg2 = shallowRef({name: '菜鸡2',
})
const changeMsg2 = () => {// 修改表层的数据 可修改msg2.value = {name: '我是name',}
}
</script>

效果
方式2

<template><div><div><button @click="changeMsg1">修改msg1</button><div>msg1 -- {{ msg1 }}</div></div></div>
</template><script setup lang="ts">
import { shallowRef, triggerRef } from 'vue'
// 使用shallowRef 定义的数据，只是表层具有响应式的，里层的数据则是没有响应式的
let msg1 = shallowRef({name: '菜鸡1',
})
const changeMsg1 = () => {// msg1.value = 'xxxx' // 这种是 修改简单数据类型的方式 报错msg1.value.name = 'xxxx' // 若是使用 本地数据已经更改console.log('msg1', msg1.value)// {name: 'xxxx'} 但是由于 shallowRef 定义的数据，仅仅是表层数据为响应式，因此对象形式没有被监听到// 若是想要实现 监听，则可以使用 triggerRef() 包裹着当前需要更新的值triggerRef(msg1)
}
</script>

效果

shallowRef 不能和ref 同时使用

注意点：shallowRef 和 ref不能一起写，会影响shallowRef 对视图的更新

    <div><div>{{ aaa }}</div><div>{{ bbb }}</div><div>{{ b }}</div><button @click="changeA">修改A</button><button @click="changeb">修改b</button></div>type AAA = {name: string
}
let aaa = ref<AAA>({name: 'xzl'
})
let bbb = shallowRef<AAA>({name: 'xzl-b'
})
let b = shallowRef(0)
// 注意点：就是使用 shallowRef定义的数据，
const changeA = () => {// aaa.value.name = 'XZL'bbb.value.name = 'XZL-bbb' // 值修改了 但是视图不修改// b.value = 100console.log('a', aaa, 'b', bbb)
}
const changeb = () => {b.value = 100
}

customRef

customRef 可以用来创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制
它需要一个工厂函数，该函数接收 track 和 trigger 函数作为参数，并且应该返回一个带有 get 和 set 的对象。
其实大致意思就是，我们可以按照自己的业务需求去自定义封装一个 ref 对象，在其内部可以使用 get 和 set去跟踪或更新数据，有点类似计算属性

实现类似计算属性

<template><div><div><button @click="changeMsg2">修改msg2</button><div>msg2 -- {{ msg2 }}</div></div></div>
</template><script setup lang="ts">
import { customRef } from 'vue'
function myRef<T>(value: T) {return customRef((trank, trigger) => {return {get() {trank() // 收集依赖return value},set(newVal: T) {console.log('set')value = newValtrigger() // 触发更新},}})
}
let msg2 = myRef<String>('菜鸡')
const changeMsg2 = () => {msg2.value = '菜鸡22'
}
</script>

效果

封装一个防抖函数

再500毫秒后，再更新这个值

<template><div><div><input v-model="msg2" /><div>msg2 -- {{ msg2 }}</div></div></div>
</template><script setup lang="ts">
import { customRef } from 'vue'
function useDebouncedRef<T>(value: T, delay: number) {let timer: any = nullreturn customRef<T>((track, trigger) => ({get() {track()return value},set(newValue) {clearTimeout(timer)timer = setTimeout(() => {value = newValue// ...do somethingtrigger()}, delay)},}))
}const msg2 = useDebouncedRef<string>('0', 500)
</script>

ref 设置获取dom节点

    <div><div ref="aaa">我是aaa的dom节点</div><button @click="getDom">获取don</button></div>const aaa = ref<HTMLDivElement>()
onMounted(() => {console.log('aaa', aaa.value?.innerText)
})const getDom = () => {console.log('aaa222', aaa.value?.innerText)
}

vue3之定义数据(Ref全家桶)相关推荐

学习Vue3 第六章（认识Ref全家桶）
视频教程小满Vue3(第六章 Ref 全家桶 & 源码解析)_哔哩哔哩_bilibili ref 接受一个内部值并返回一个响应式且可变的 ref 对象.ref 对象仅有一个 .value pr ...
助你上手Vue3全家桶之Vue3教程
目录前言 1,setup 1.1,返回值 1.2,注意点 1.3,语法 1.4,setup的参数 2,ref 创建响应式数据 3,reactive 创建响应式数据 4,computed 计算属性 5 ...
Vue项目实战——实现一个任务清单【基于 Vue3.x 全家桶（简易版）】
Vue3.x 项目实战(一) 内容参考链接 Vue2.x全家桶 Vue2.x 全家桶参考链接 Vue2.x项目(一) Vue2.x 实现一个任务清单 Vue2.x项目(二) Vue2.x 实现Git ...
猿创征文 | 开箱即用 yyg-cli：快速创建 vue3 组件库和vue3 全家桶项目
1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架.在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 ...
insert into 多条数据_最全总结 | 聊聊 Python 数据处理全家桶（Sqlite篇）
点击上方"AirPython",选择"加为星标" 第一时间关注 Python 技术干货! 1. 前言上篇文章聊到 Python 处理 Mysql 数据库最常 ...
【Vue】Vue全家桶（九）Vue3
文章目录 1 Vue3简介 2 创建Vue3工程 2.1 使用 vue-cli 创建 2.2 使用 vite 创建 3 分析文件目录 main.js App.vue 4 Composition 组合式 ...
vue全家桶+Echarts+百度地图，搭建数据可视化系统
本文章篇幅略长,内容有点多大佬可根据目录选择性查阅新人可一步步来阅读 1 前言 1.1 业务场景突然接到产品说要做一个数据监控的系统.有线图.柱状图.地图,类似于数据可视化的方式. 本人之前从未 ...
手撸一个Flutter插件实现跨苹果全家桶云同步持久化Key Value数据
前言作为一个客户端开发者,后端开发一直是我的弱项.虽然GPT的横空出世,让我对后端的开发有一点眉目.但是现实是,能不触碰就不触碰,因为人的精力是有限,如何在有限的时间里发挥最大的作用一直是我的一个追 ...
推荐一个 Vue3 全家桶 + TS+ Vite2 + element-plus 的网站实战项目
五一期间,花了 3 天时间,边学 Vue3 和 Vite2,边重构自己的项目,终于都用 Vue3 + TypeScript + Vite2 + Vuex4 + Vue-Router4 + elemen ...

vue3之定义数据(Ref全家桶)

目录

vue3之定义数据

只是用于展示的数据(非响应式数据)

响应式数据 (Ref全家桶)

定义简单数据类型

判断是否为 ref对象(定义为响应式数据对象)

shallowRef 定义简单数据类型的响应式

shallowRef 不能和ref 同时使用

customRef

实现类似计算属性

封装一个防抖函数

ref 设置获取dom节点

vue3之定义数据(Ref全家桶)相关推荐

最新文章

热门文章