vue3_ref全家桶

1.ref

接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value

<template>
  <div id="container">
        <div>{{ num }}</div>
        <div>{{ str }}</div>
        <el-button @click="change">change</el-button>
        <el-button @click="change2">change</el-button>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
let str = '我是非响应式数据'
const num = ref<number|string>("112")
const change = () =>{
    num.value = 110
    str='我是非响应式数据， 我变了' 
    //同时改变响应式和非响应式数据，str和num都会更新，有点奇怪，还没找到原因
}
const change2 = () =>{
    str='我是非响应式数据， 我变了'//单独改变非响应式数据，页面不会更新
}
</script>

ref小妙招：

const num = ref(11)
console.log(num)

一开始打印出来是下面这样的：

设置：

xxx----
设置过后打印的内容：

2.isRef

判断是不是一个ref对象

import {ref,isRef} from 'vue'
let str = '我是非响应式数据'
const num = ref<number|string>("112")
console.log(isRef(num));//true
console.log(isRef(str));//false

3.shallowRef

和 ref() 不同，浅层 ref 的内部值将会原样存储和暴露，并且不会被深层递归地转为响应式。只有对 .value 的访问是响应式的

<template>
    <div>
      <el-button @click="changeMsg">change</el-button>
      <div>{{ state.count }}</div>
    </div>
  </template>
  <script setup lang="ts">
  import {shallowRef } from 'vue'
  const state = shallowRef({ count: 1 })
  const changeMsg = () => {
    // 不会触发页面更改
    // state.value.count = 2 
    // console.log(state.value.count); //2
    
    // 会触发页面更改
    state.value = { count: 2 }
  }
  </script>

4.triggerRef

强制触发依赖于一个浅层 ref 的副作用（强制更新页面DOM）

<template>
    <div>
      <el-button @click="changeMsg">change</el-button>
      <div>{{ state.count }}</div>
    </div>
  </template>
   
   
   
  <script setup lang="ts">
  import {shallowRef, triggerRef } from 'vue'
  const state = shallowRef({ count: 1 })
  const changeMsg = () => {
    // 不会触发页面更改
    state.value.count = 2 
    triggerRef(state) //利用triggerRef，state.count也会页面更新 2
    // 会触发页面更改
    // state.value = { count: 2 }
  }
  </script>

5.customRef

自定义的 ref

• customRef() 预期接收一个工厂函数作为参数，这个工厂函数接受 track 和 trigger 两个函数作为参数，并返回一个带有 get 和 set 方法的对象
• 一般来说，track() 应该在 get() 方法中调用，而 trigger() 应该在 set() 中调用。然而事实上，你对何时调用、是否应该调用他们有完全的控制权

<template>
    <div> {{ name }}</div>
    <button @click="change">修改 customRef</button>
  </template>
   
  <script setup lang='ts'>
  import {customRef } from 'vue'
   
  function myRef<T = any>(value: T) {
    let timer:any;
    return customRef((track, trigger) => {
      return {
        get() {
          track()
          return value
        },
        set(newVal) {
          clearTimeout(timer)
          timer =  setTimeout(() => {
            console.log('触发了set')
            value = newVal
            trigger()
          },500)
        }
      }
    })
  }
  const name = myRef<string>('hello')
  const change = () => {
    name.value = 'world'
  }
   
  </script>