1.初识vue3之ref全家桶

真的有人可以忍住不和喜欢的人聊天吗

1. ref()

使用:

1. 导入
import { ref } from 'vue'

ref是vue3中的声明响应式的方法

let keep = '慢跑    // 如果直接这样声明 非响应式

let keep = ref('慢跑')   // 此时这个 keep 是一个响应式对象

2. Ref

使用:

1. 导入
import type { Ref } 'vue'

这个是ref的类型, 为ts专属, 当类型比较复杂的时候, 可以导入使用

3. isRef()

判断是否为 ref 对象

let keep = '慢跑    // 如果直接这样声明 非响应式
console.log(isRef(keep))   // false

let keep = ref('慢跑')   // 此时这个 keep 是一个响应式对象
console.log(isRef(keep))   // true

4. shallowRef()与triggerRef()

与 ref 不同, 这个是用来声明浅层次的响应式

let obj = shallowRef({name: '孙尚香'})
// 修改
const change = () => {
    obj.value.name = '马可波罗';  // 无效的
    
    obj.value = {      // 有效的
        name: '马可波罗'
    }
}

注意:

ref 和 shallowRef 两者是不可以同时写在一起的, 否则就会受到影响, 如果 ref 发生了改变, shallowRef 也会发生改变, 造成视图的更新

原因:

在ref底层更新的时候, 会调用 triggerRef() 这个函数, triggerRef会强制的更新收集的依赖, 所以

5. customRef()

使用这个我们可以自己实现ref, 不过比较复杂

function MyRef<T>(value:T) {
    return customRef((track,trigger) => {
        return {
            // 收集依赖
            get() {
                track()
                return value
            },
            // 触发依赖
            set(newVal) {
                value = newVal
                trigger()
            }
        }
        
    })
}

cosnt str = MyRef<string>('戈亚');
// 修改
str.value = '戈亚无了'

使用:

如果在请求接口的时候, 可以做一个防抖的操作

<div>{{str}}</div>
<button @click=change>修改</button>

function MyRef<T>(value: T) {
  let timer: any
  return customRef((track, trigger) => {
    return {
      // 收集依赖
      get() {
        track()
        return value
      },
      // 触发依赖
      set(newVal) {
        clearTimeout(timer);
        timer = setTimeout(() => {
          console.log('触发了')
          value = newVal
          timer = null
          trigger()
        },500)
      }
    }

  })
}
const str = MyRef<string>('戈亚');
const change = () => {
    str.value =  '戈娅无了'
}

6. 使用ref获取dom元素

<div ref="dom">我是dom</div>
<button @click=change>获取</button>

const dom = ref<HTMLDivElement>()  // 推断为HTMLDivElement 不然没有提示
const change = () => {
    console.log(dom.value?.innerText) // 可能没有这个div, 所以加 ?
}