仅仅为了方便学习记录信息，未有其他用途。（采摘）
shallowReactive 与 shallowRef
- shallowReactive : 只处理了对象内最外层属性的响应式(也就是浅响应式)
- shallowRef: 只处理了value的响应式, 不进行对象的reactive处理
readonly 与 shallowReadonly
- readonly :只读代理是深层的：访问的任何嵌套 property 也是只读的。
- shallowReadonly:创建一个代理，使其自身的 property 为只读，但不执行嵌套对象的深度只读转换
toRaw 与 markRaw
- toRaw: 返回由 reactive 或 readonly 方法转换成响应式代理的普通对象。这是一个还原方法，可用于临时读取，访问不会被代理/跟踪，写入时也不会触发界面更新。
- markRaw: 标记一个对象，使其永远不会转换为代理。返回对象本身.
toRef()
- toRef 为源响应式对象上的某个属性创建一个 ref对象, 二者内部操作的是同一个数据值, 更新时二者是同步的
- 区别ref: 拷贝了对象属性的一份新的数据值单独操作, 更新时相互不影响
customRef
创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制.
<template>
<input v-model="keyword" placeholder="搜索关键字"/>{{keyword}}
</template>
<script lang="ts">
import { ref, customRef } from 'vue'
export default {
setup () {
const keyword = useDebouncedRef('', 500)
return { keyword }
},
}
/*
实现函数防抖的自定义ref
*/
function useDebouncedRef<T>(value: T, delay = 200) {
let timeout: number
return customRef((track, trigger) => {
return {
get() {
track() // 告诉Vue追踪数据
return value
},
set(newValue: T) {
clearTimeout(timeout)
timeout = setTimeout(() => {
value = newValue;
trigger();// 告诉Vue去触发界面更新
}, delay)
}
}
})
}
</script>
provide 与 inject
provide 与 inject实现跨层级组件(祖孙)间通信
<template>
<h1>父组件</h1>
<p>当前颜色: {{color}}</p>
<button @click="color='red'">红</button>
<Son />
</template>
<script lang="ts">
import { provide, ref } from 'vue'
import Son from './Son.vue'
export default {
name: 'ProvideInject',
components: {
Son
},
setup() {
const color = ref('red')
provide('color', color)
return {
color
}
}
}
</script>
<template>
<h2>子组件</h2>
<GrandSon />
</template>
<script lang="ts">
import GrandSon from './GrandSon.vue'
export default {
components: {
GrandSon
},
}
</script>
<template>
<h3 :style="{color}">孙子组件: {{color}}</h3>
</template>
<script lang="ts">
import { inject } from 'vue'
export default {
setup() {
const color = inject('color')
return {
color
}
}
}
</script>
响应式数据的判断
- isRef: 检查一个值是否为一个 ref 对象
- isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
- isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
- isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理
Composition API(常用)<===========================>Composition API(手写)
