vue3新特性及api介绍（三）

继续之前的内容

二、vue3新特性

14.customRef

customRef创建一个自定义依赖项和跟踪触发的ref属性，也就是说，我们可以控制这个属性何时触发对应的监听。要求返回一带有get和set方法的对象。比如这样，我们修改之后延迟2s触发对应的更新。

    function useDebouncedRef(value, delay = 2000) {
      let timeout;
      return customRef((track, trigger) => {
        return {
          get() {
            track();
            return value;
          },
          set(newValue) {
            clearTimeout(timeout);
            timeout = setTimeout(() => {
              value = newValue;
              trigger();
            }, delay);
          }
        };
      });
    }
    const text = useDebouncedRef("hello");
    text.value = "change";
    watchEffect(() => {
      console.log(text.value, new Date().getSeconds());
    });
    return {
      text
    };

15.markRow

返回一个标记之后的对象，这个对象不会被再被包装，即不能转换为reactive属性或者ref属性，也就是无法自动被追踪

    const text = markRaw({
      value: "hello"
    });
    function clickEvent() {
      text.value = 123;
    }
    return {
      text,
      clickEvent
    };

点击之后，界面上text的文字也还是hello，不会触发自动刷新，也就是这是一个非响应式的数据

16.shallowReactive

创建一个响应式对象，但是只追踪自己最外层的属性，不会追踪嵌套的属性

    const text = shallowReactive({
      value: "123",
      deep: {
        a: "111"
      }
    });

17.shallowReadonly

创建一个只读对象，但是只冻结最外层属性的操作，不会冻结嵌套的属性

    const text = shallowReadonly({
      value: "123",
      deep: {
        a: "111"
      }
    });

18.shallowRef

创建一个ref属性，但是只追踪value属性，不会追踪嵌套属性的value属性

    const text = shallowRef({ a: "111" });
    watchEffect(() => {
      console.log(text.value);
    });
    function clickEvent() {
      text.value.a = "123";
    }
    return {
      text,
      clickEvent
    };

在上面这个例子中，手动修改text.value.a是不会出发视图更新的

19.toRaw

toRaw返回一个reactive或者readonly属性的原始对象，修改这个原始对象的值也会修改对应的包装对象的值，但是不会触发对应的追踪，视图也不会自动刷新，慎用

    const text = reactive({ state: "123" });
    const status = toRaw(text);
    function clickEvent() {
      status.state = "111";
      console.log(text.state);
    }
    return {
      text,
      clickEvent
    };