Vue3之Ref全家桶
Vue3 引入了新的 Ref API，这是一个非常重要的新特性。在 Vue3 中，ref 是一个函数，用于创建一个可响应的引用。ref 返回的对象具有一个名为 value 的属性，可以用来获取或设置其值。
在 Vue3 组件中，你可以使用 ref 创建一个响应式的数据源。例如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
function increment() {
count.value++
}
return {
count,
increment
}
}
}
|
在这个例子中，count 是一个响应式的值，每当 increment 函数被调用时，count 的值就会增加。
总的来说，Vue3 的 ref API 为我们提供了一个更灵活、直观的方式来管理和响应数据的变化。
以上为AI输出内容
shallowRef
shallowRef 为浅层的响应
以下为代码示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <script setup>
import {shallowRef} from "vue";
const value = shallowRef({
name: '触发'
})
const change = () => {
value.value.name = '不触发'
value.value = {
name: '触发了'
}
}
</script>
<template>
<div>
{{ value }}
<button @click="change">Click Me</button>
</div>
</template>
|
shallowRef的浅响应大概就是这样了
还有一点是ref和shallowRef是不能一起使用的，否则当ref变化时会影响到shallowRef，导致视图更新
triggerRef
顾名思义trigger触发 ，triggerRef会触发Ref，在上方不会触发的代码下加入下方代码就会完成触发事件，导致shallowRef更新
customRef
自定义Ref
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <script setup>
const myRef = (value) => {
return customRef((track, trigger) => {
return {
get() {
track()
return value
},
set(newVal) {
value = newVal
trigger()
}
}
})
}
const obj = myRef('测试1')
const changeMyRef = () => {
obj.value = '测试2'
}
</script>
<template>
<div>
{{ obj }}
<button @click="changeMyRef">Click Me</button>
</div>
</template>
|
再在上面修改一下加上防抖的功能
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| const myRef = (value) => {
let timer
return customRef((track, trigger) => {
return {
get() {
track()
return value
},
set(newVal) {
clearTimeout(timer)
timer = setTimeout(() => {
console.log('触发了')
value = newVal
timer = null
trigger()
},1000)
}
}
})
}
|