ref

<template>

  <h1 @click="addCount">{{ count }}</h1>

  <h1 @click="addCountObj">{{ countObj.count }}</h1>

  <div ref="divRef"></div>

</template>

<script setup lang="ts">

import { ref, shallowRef, triggerRef, customRef } from 'vue'

const count = ref(0)

const addCount = () => {

  count.value  = count.value + 1 // ref返回的是一个class,因此需要通过.value去进行操作

  countObj.value.count  = 1 // 此处应该错误,shallowRef并不能通过属性复制，但是源码中ref赋值会调用triggerRef强制更新

  triggerRef(countObj) // triggerRef会强制更新shallowRef,使其具有响应式，否则countObj.value.count无法生效

}

const divRef = ref<HTMLDivElement>() // 定义一个与元素同名的ref变量，HTMLDivElement泛型定义为HTML元素，方便调用HTML的属性

const countObj = shallowRef({count: 0})

const addCountObj = () => {

  countObj.value  = { count: 1} // 正确

  // countObj.value.count  = 1 // 错误，shallowRef是浅层次,因此只能.value赋值，不能再通过属性赋值

                               // 在源码中shallRef获取到对象或者是数组不会在调用reactive

  console.log(divRef.value?.innerText); // ref同名变量可直接获取该元素Dom，可获取该Dom的属性和方法

}

//customRef 自定义ref,通过set和get定义发生数据变得时可以自定义触发事件

function customReffFunction<T>(value:T) {

  return customRef((tarck,trigger) => {

    return {

      get() {

        tarck() // 追踪依赖

        return value

      },

      set(newValue) {

        value = newValue

        trigger() // 触发

      }

    }

  })

}

const obj = customReffFunction('自定义') // 自定义一个ref使用,可以在响应式触发自定义的函数

const customChange = () => {

  obj.value = '被点击了'

}

</script>

<style scoped>

.read-the-docs {

  color: #888;

}

</style>