第二章、Composition API中的ref()

一、ref(): 定义响应式数据

1、ref返回的值，在tempalte中自动解包,不需要xxx.value书写；在script中，必须通过xxx.value访问
2、ref包裹引用值，会自动调用reactive()函数；

示例

<template>
  <div id="app">
    <h3>ref</h3>
    <h5>ref包裹基本值：{{count}} <button @click="count++">增加</button></h5>
    <h5>ref包裹引用值:</h5>
    <p>nestedArr: {{nestedArr}}</p>
    <!--nestedObj.bar.foo xx.value属性被自动解包  -->
    <p>nestedObj: {{nestedObj}} {{nestedObj.bar.foo}}</p> 
    <button @click="changeArrAndObj">修改</button>
  </div>
</template>

<script setup>
import { ref,isReactive } from 'vue'
// ref 包裹基本值
const count = ref(0)

// ref 包裹引用类型值
const nestedArr = ref([])
const nestedObj = ref({
  foo: 1,
  bar:{
    foo: 2,
    quz:{
      foobar: 3
    }
  }
})

console.log('nestedObj ->',isReactive(nestedObj)) // false  -> ref

//证明 ref包裹对象，会被reactive转换,并且是深度劫持
console.log('nestedObj.value ->',isReactive(nestedObj.value)) // true 
console.log('nestedObj.value.bar ->',isReactive(nestedObj.value.bar)) //  true
console.log('nestedObj.value.bar.foo ->',isReactive(nestedObj.value.bar.foo)) // false 原始值
console.log('nestedObj.value.bar.quz ->',isReactive(nestedObj.value.bar.quz)) // true

const changeArrAndObj = () =>{
  const randomNum = Math.floor(Math.random()*100+1) 
  nestedArr.value.push(randomNum)  //不要丢掉value属性
  nestedObj.value.foo.bar ++   
}
</script>

二、ref 获取DOM节点

<p ref="p">段落</p> //template

const pTag = ref(null)  //script
onMounted(() =>{
  console.log(pTag.value)
})

三、shallowRef() : 浅层响应，只作用到.value；不会进行深度响应；内部值原始存储。

<template>
  <div id="app">
    {{shallowRefObj}} <button @click="changeShallowRefObj">修改shallowRef</button>
  </div>
</template>
<script setup>
import { ref, shallowRef, isReactive } from 'vue'

const shallowRefObj = shallowRef({
  foo: 1,
  bar:{
    foo: 2,
    quz:{
      foobar: 3
    }
  }
})
// 可把shallowRef返回值看做一个普通的含有value属性的ref对象,不会深度劫持响应
console.log('shallowRefObj',shallowRefObj,isReactive(shallowRefObj.value),isReactive(shallowRefObj.value.bar)) //false false 

const changeShallowRefObj = () =>{
   // 此时会触发试图更新，shallowRef 只作用于.value
  // ShallowRefObj.value = { a:1, b: 2 } 

  // 下面这种情况，数据会发生改变，但会丢失响应式，不会触发试图更新
  shallowRefObj.value.foo = 2;   
  shallowRefObj.value.bar.foo = 3;
  console.log(shallowRefObj)

### triggerRef 强制更新；变相理解为vue2中的$set
  triggerRef(shallowUserRef) // 强制更新shallowRef的数据，此时会更新试图

}
</script>

<style scoped></style>

四、triggerRef(): 强制更新，变相理解为$set(vue2.x),请看上面这个例子

五、customRef()：自定义Ref,显式声明对其依赖追踪和更新触发的控制方式。

如自定义防抖
import { customRef } from 'vue'

export function useDebouncedRef(value, delay = 200) {
  let timeout
  return customRef((track, trigger) => {
    return {
      get() {
        // 依赖追踪
        track()
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
         //触发更新
          trigger()
        }, delay)
      }
    }
  })
}

六、$ref 响应式语法糖： 实验中,不要用.....

详情看：https://cn.vuejs.org/guide/extras/reactivity-transform.html#retaining-reactivity-across-function-boundaries

目的： 主要为了去掉在script中写.value的麻烦 .......，