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
    };