【vue3】ref全家桶

ref全家桶

ref

ref 接受一个内部值并返回一个响应式且可变的ref对象。ref对象仅有一个.value property，指向该内部值。

在vue3中，定义的常量不是响应式的，修改值的时候页面不会发生变化。这时候我们需要调用ref来把它变成响应式的，修改ref对象值的时候，必须是修改value指向内部值，如下代码所示：

//引入ref
import {ref} from "vue";

let name = "daxue";
//没有初始值的时候可以定义为 let sex = ref(0)
let sex = ref("man");

const clickTap = ()=>{
    //页面不会更新
    name = "ding~daxue"
    //页面sex参数更新
    sex.value = "woman"
}

//ref获取dom对象
<div ref='dom'></div>

//定义的变量名一定要跟div上ref属性值一模一样
const dom = ref();

unref

如果参数是一个ref，则返回内部值，否则返回参数本身。这是 val = isRef(val)?val.value:val 的语法糖函数。

toRef

可以用来为源响应式对象上的某个property新创建一个ref。然后，ref可以被传递，他会保持对其源property的响应式连接。

将对象某个属性变成可响应式的，并且是双向的。如下代码：

const user = {
	name:"daxue",
    sex:"woman"
}
const name = toRef(user,'name')
const clickTap=()=>{
    name = "ding~daxue"
}

toRefs

将响应式对象转换为普通对象，其中结果对象的每个property都是指向原始对象相应property的ref

这一属性相当于上面toRef的集合，是给对象里面每个属性都生成了ref。

const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)
/*
stateAsRefs 的类型:

{
  foo: Ref<number>,
  bar: Ref<number>
}
*/

// ref 和原始 property 已经“链接”起来了
state.foo++
console.log(stateAsRefs.foo.value) // 2

stateAsRefs.foo.value++
console.log(state.foo) // 3

isRef

检查值是否为一个ref对象

customRef

创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 track 和 trigger 函数作为参数，并且应该返回一个带有 get 和 set 的对象。

使用customRef通过v-model实现debounce的示例：

<input v-model="text" />

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)
      }
    }
  })
}

export default {
  setup() {
    return {
      text: useDebouncedRef('hello')
    }
  }
}

shallowRef

创建一个跟踪自身 .value 变化的 ref，但不会使其值也变成响应式的。

//页面
<div>{{user.name}}</div>

let user = shallowRef({ name: "daxue", age: 8 })

const change = () => {
  user.value.name = "xiaoxue"
}

上面这种情况页面不会更新,但是打印值发现其实value已经更新.要想页面更新,需要下面这种方法

let user = shallowRef({ name: "daxue", age: 8 })

const change = () => {
    //1111111
  user.value = {
    name: "xiaoxue",
    age: 9
  }
    //22222222
    user.value.name="xiaoxue";
    triggerRef(user)
}

注意:shallowRef跟ref不能一起使用，因为ref使用了triggerRef,会影响shallowRef的只改变.value不改变具体值。

triggerRef

手动执行与 shallowRef 关联的任何作用 (effect)。

谷歌调试工具小tips

这样直接查看ref具体值,不需要再点开value看里面具体值