vue3学习——Ref全家桶

ref

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

即let s=ref(val),   s.value==val

引入

import { ref , Ref } from "vue"

定义变量

//普通变量

let message:String = "hello"

//ref响应式变量

let message = ref<string>("hello")

修改

<div>{{message}}</div>

const change=()=>{

message.vale="bye"

}

注：template中默认取ref对象中的value值，script中需要对value进行操作

Ref

ref在ts中类型为Ref,定义方法为

let message : Ref<string>=ref("hello")

isRef

判断是不是一个ref对象,f返回boolean

let message1:String = "hello"

isRef(message1) //false

let message2 = ref<string>("hello")

isRef(message2) //true

shallowRef

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

即 value 更改会更新视图  value下层属性值更改不会更新视图

引入

import { shallowRef , Ref } from "vue"

定义变量

let obj = shallowRef({

name:"皮皮鲁"

})

或者

type obj = {

name: string

}

let message: Ref<obj> = shallowRef({

name: "小满"

})

修改

obj.value.name="鲁西西“  //视图不更新

obj.value = { name:"鲁西西”} //视图更新

注：ref的更新会触发shallowRef视图更新

triggerRef 

配合shallowRef使用，接受一个shallowRef对象，强制更新页面DOM

const change = ()=>{

obj.value.name="鲁西西“ //视图未更新

triggerRef(obj) //视图更新

}

customRef

自定义ref 

customRef 是个工厂函数要求我们返回一个对象 并且实现 get 和 set

<script setup lang="ts">
import { Ref, shallowRef, triggerRef, customRef } from 'vue'
 
function Myref<T>(value: T) {
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newVal: T) {
        console.log('set');
        value = newVal
        trigger()
      }
    }
  })
}
 
let message = Myref('皮皮鲁')
const changeMsg = () => {
  message.value = '鲁西西'
  // triggerRef(message)
}
</script>