Vue 學習 Ref shallowRef triggerRef customRef （Ref 和 Reactive的對比）

卡优卡1255發表於2024-08-21
VueReact

Ref shallowRef triggerRef customRef

針對物件（引用型別）來說：
Ref:深層次的檢查後面的物件的每一層是否改變，會改變值，且頁面渲染

shallowRef：淺層次的檢查物件內，想要修改必須要要對 .value物件進行重新賦值


obj.value.name = '456' //這種方式只會讓物件值更改，但不會讓頁面重新渲染，除非加上 下面這句
triggerRef() // 相當於customRef回撥裡面的set方法的trigger()，都是可以讓頁面重新渲染

obj.value = { // 這樣賦值才正確
  name:'456'
}

customRef:有track, trigger的回撥函式，需要像下面這樣寫，其核心就是把 獲取值 和 更新檢視的兩個方法交給我們自己去定義，一般配合set防抖使用（見影片）

const MyRef = () => {
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return obj.value
      },
      set(val) {
        obj.value = val
        trigger()
      },
    }
  })
}

const obj=MyRef<string>('customRef Hugo') // 和ref的使用方法一致
console.log(obj.value)

reactive:用來繫結複雜資料物件，reactive的原始碼約束了我們的型別只能是Object，他是不可以繫結普通的資料型別這樣是不允許 會給我們報錯

import { reactive} from 'vue'
 
let person = reactive('sad') // 會爆警告

使用reactive 去修改值無須.value

import { reactive } from 'vue'
let person = reactive({
   name:"小滿"
})
person.name = "大滿"

陣列非同步賦值問題

參考影片：https://www.bilibili.com/video/BV1dS4y1y7vd/?p=7&vd_source=31671c7360997b43da3182779a12077a
參考部落格：https://xiaoman.blog.csdn.net/article/details/122784094

相關文章