API学习笔记

1、readonly()

定义一些不想被其他同时修改的常量，可以使用

const options = readonly([{ x: 1 }, { x: 2 }]);	

2、triggerRef

强制触发依赖于一个浅层 ref (opens new window) 的副作用，这通常在对浅引用的内部值进行深度变更后使用，功能类似于$forceUpdate()

const shallow = shallowRef<{ person: { name: string } }>({
  person: {
    name: 'xdyuan'
  }
});
const doShallow = () => {
  shallow.value.person.name = 'xdyuan - 2';
  triggerRef(shallow);
};

3、customRef

自定义Ref， 暂时没有想到也别好的应用场景

import { customRef } from 'vue';
export function useDebounceRef<T>(value: T, delay = 200) {
  let timer = 0;
  let _value = value;
  return customRef<T>((track, trigger) => {
    return {
      get() {
        track();
        return _value;
      },
      set(val) {
        if (timer) {
          clearTimeout(timer);
          timer = 0;
        }
        timer = setTimeout(() => {
          _value = val;
          trigger();
        }, delay);
      }
    };
  });
}

自定义一个Ref，值只能是0-100的数字,其他数字设置无效

export function ScoreRef() {
  let _val = 0;
  return customRef<number>((track, trigger) => {
    return {
      get() {
        track();
        return _val;
      },
      set(val) {
        if (0 <= val && val <= 100) {
          _val = val;
          trigger();
        }
      }
    };
  });
}

4、markRow

将一个对象标记为不可被转为代理。返回该对象本身

• 有些值不应该是响应式的，例如复杂的第三方类实例或 Vue 组件对象。
• 当呈现带有不可变数据源的大型列表时，跳过代理转换可以提高性能。

其实就是给对象添加了一个 __v_skip属性

const obj2 = { x: 1, __v_skip: true };
// const foo = markRaw(obj2);
// console.log(obj2, foo, '11');
const bar = reactive(obj2);
console.log(isReactive(bar)); // false

5、onUpdated()

注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。

::: 注意

不要在 updated 钩子中更改组件的状态，这可能会导致无限的更新循环！

:::