Vue 学习 Ref shallowRef triggerRef customRef （Ref 和 Reactive的对比）

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