Composition API(其它)

仅仅为了方便学习记录信息，未有其他用途。（采摘）

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(手写)