# CompsitionApi

# ref

概述: 接受一个参数值并返回一个响应式对象，Ref对象只有单一属性.value。 Ref对象赋给reactive也会自动解构value值
大部分情况都可以使用ref 梭哈

import { ref } from 'vue'

const count = ref(0);
console.log(count.value); // 0

// 使用 reactive
const obj = reactive({ count })
console.log(obj.count); // 0

使用ref获取Dom或者组件实例

<template>
  <div ref="dom1">hello world</div>
  <my-component ref="myCompoent"></my-component>
</template>

<script setup>
const dom1 = ref()
const myComponent = ref()
</script>

# shallowRef

概述：包装基础类型和Ref没有区别，但是包装引用类型那么修改深层的属性是不会触发响应式的。

import { shallowRef } from 'vue'

const obj = shallowRef({
  a: 1
})

obj.value.a = 2 // 不会触发响应式
obj.value = { a: 2 } // 会触发

# reactive

概述: 接受一个普通对象然后返回该对象的响应式代理，类似Vue2中Vue.observable()。

import { reactive, toRefs } from 'vue'

const obj = reactive({ count: 0 })

// 可以使用 toRefs 将 reactive 中的所有属性转为 ref
const { count } = toRefs(obj)

# shallowReactive

概述：修改第一层才会触发响应式，深层属性无法触发

import { shallowReactive } from 'vue'

const obj = shallowReactive({
  a: 1,
  b: [1, 2]
})

obj.a = 2 // 有效
obj.b[0] = 2 // 无效

# computed

概述:
- 传入一个getter函数，返回的是一个不可手动修改的Ref对象。
- 传入setter与getter函数对象

import { computed } from 'vue'

const one = computed(() => 1 + 1)
console.log(one.value) // 2
one.value = 5 // 报错

const two = computed({
  get () {
    return one.value
  },
  set (val) {
    // dosomething...
  }
})

# readonly

概述: 传入一个对象（响应式或者普通）,返回一个原始对象的只读代理。

import { readonly } from 'vue'

const proxy = readonly({
  count: 1
})
proxy.count = 2 // 警告

# provide & inject

// 根组件
import { provide } from 'vue'

const InjectKey = symbol('inject-key')
provide(InjectKey, {
  // ...
})

// 子孙组件
import { inject } from 'vue'

const { /* ... */ } = inject(InjectKey, {
  // 如果没有获取到对应的 provide 则使用当前的默认值 可选
})

# toRaw & markRaw

# toRaw

概述：将一个Reactive转化成普通对象

import { reactive, toRaw } from 'vue'

const obj = reactive({ a: 1 })
const raw = toRaw(obj)

# markRaw

概述：将一个对象标记为不可以转化为响应对象

import { ref, markRaw, reactive } from 'vue'
import * as _echarts from 'ecahrts'

const echarts = ref()
echarts.value = markRaw(_echarts.init(/* ... */))

// 或者只针对某个属性
const obj = {
  a: 1,
  b: [2, 3]
}

markRaw(obj.b)

reactive(obj)

← Vue3 vModel →