Vue Ref全家桶具体用法详解

<template>
  <div>{{ count }}</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
console.log(count.value) // 输出 0
count.value += 1
console.log(count.value) // 输出 1
</script>
<style scoped>
</style>

<template>
  <div ref="container"></div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
const container = ref(null) // 注意：此处的变量名必须和标签上的属性名一致
onMounted(() => {
  console.log(container.value) // 输出 <div></div>
})
</script>
<style scoped>
</style>

<template>
  <Child ref="child" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Child from './Child.vue'
const child = ref(null)
</script>
<style scoped>
</style>

<template>
  <Child ref="child" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const data = { name: 'John' }
const obj = ref(data)
console.log(obj.value.name) // 输出 'John'
obj.value.name = 'Mary'
console.log(data.name) // 输出 'Mary'
<script>
<style scoped>
</style>

import { isObject } from '@vue/shared'
import { ReactiveFlags, reactive } from './reactive'
export function ref(value) {
  // 如果value已经是一个ref对象，直接返回它
  if (isRef(value)) {
    return value
  }
  // 创建一个响应式对象
  let valueIsObject = isObject(value)
  const ref = {
    // 标记这个对象是一个ref对象
    [ReactiveFlags.IS_REF]: true,
    // 获取ref的值
    get value() {
      // 如果value是一个对象，则返回一个响应式对象
      if (valueIsObject) {
        return reactive(value)
      }
      return value
    },
    // 设置ref的值
    set value(newVal) {
      if (valueIsObject) {
        value = newVal
        valueIsObject = isObject(newVal)
        return
      }
      // 如果value是一个基本类型的值，则直接修改它
      value = newVal
    }
  }
  return ref
}

<template>
  <div class="wrapper"></div>
</template>
<script setup lang="ts">
import { isRef, ref } from 'vue';
const name: string = '张三';
console.log(isRef(name)); // false
const age = ref(10);
console.log(isRef(age)); // true
</script>
<style scoped>
</style>

// 判断一个对象是否为ref对象
export function isRef(r) {
  return Boolean(r && r[ReactiveFlags.IS_REF])
}

<template>
  <div>{{ obj.name }}</div>
</template>
<script setup lang="ts">
import { shallowRef } from 'vue'
const obj = { name: 'John', age: 30 }
const ref = shallowRef(obj)
console.log(ref.value.name) // 输出 'John'
ref.value.name = 'Mary'
console.log(obj.name) // 输出 'Mary'
</script>
<style scoped>
</style>

import { isObject, toRawType } from '@vue/shared'
import { track, trigger } from './effect'
import { ReactiveFlags } from './reactive'
const shallowGet = (value) => value
const shallowSet = () => {
  console.warn(
    `Value assigned to a shallow ref ${String(value)} is not reactive, ` +
    `expecting explicitly passing deep: true in ref() options`
  )
}
class ShallowRefImpl {
  public readonly __v_isRef = true
  public readonly [ReactiveFlags.IS_SHALLOW] = true
  constructor(public _value) {}
  get value() {
    track(this, 'get', 'value')
    return this._value
  }
  set value(newValue) {
    if (newValue !== this._value) {
      this._value = newValue
      trigger(this, 'set', 'value', newValue)
    }
  }
}
export function shallowRef(value) {
  return new ShallowRefImpl(value)
}
export function isShallowRef(value) {
  return !!value[ReactiveFlags.IS_SHALLOW]
}

import { ref, triggerRef } from 'vue'
const count = ref(0)
// 在某些情况下需要手动更新count，可以使用triggerRef
triggerRef(count)

import { effect } from './effect'
import { track, trigger } from './operations'
export function triggerRef(ref) {
  if (ref.__v_isRef) {
    const value = ref.value
    if (isTracking()) {
      track(ref, 'set', 'value')
    }
    ref.value = value
    trigger(ref, 'set', 'value', value)
  } else {
    console.warn(`triggerRef() expects a ref object passed as its argument.`)
  }
}

import { customRef } from 'vue'
const myRef = customRef((track, trigger) => ({
  value: 0,
  get() {
    track()
    return this.value
  },
  set(newValue) {
    this.value = newValue
    trigger()
  }
}))
console.log(myRef.value) // 输出 0
myRef.value = 1
console.log(myRef.value) // 输出 1

import { track, trigger } from './effect'
export function customRef(factory) {
  const ref = {
    __v_isRef: true,
    get value() {
      return factory().get()
    },
    set value(newValue) {
      factory().set(newValue)
    }
  }
  return ref
}
export function triggerRef(ref) {
  trigger(ref, 'set', 'value', ref.value)
}