ref

接受一個內(nèi)部值并返回一個響應(yīng)式且可變的 ref 對象。ref 對象僅有一個 .value property，指向該內(nèi)部值。注意被ref包裝之后需要.value 來進行賦值

<template>
  {{ value11 }}
  <button @click="count()">count++</button>
</template>
<script>
import {
  ref,
} from "vue";
export default {
  setup() {
    const  value11 = ref(0);
    function count() {
      value11.value ++;
      console.log(value11);
    }
    return {
      count,
      value11,
    };
  },
};
</script>

shallowRef

創(chuàng)建一個跟蹤自身 .value 變化的 ref，但不會使其值也變成響應(yīng)式的

triggerRef

強制更新頁面DOM

customRef

customRef 是個工廠函數(shù)要求我們返回一個對象 并且實現(xiàn) get 和 set
可以實現(xiàn)過濾，可以當(dāng)成計算屬性來實現(xiàn)防抖，filters等功能

<template>
  ref：{{ valueRef }}
  <button @click="changeRef()">改變ref</button>
  shallowRef：{{ valueShallowRef }}
  <button @click="changeShallowRef()">改變ShallowRef</button>
  <button @click="changeShallowRef2()">改變ShallowRef2</button>
  <button @click="changeTriggerRef()">改變TriggerRef</button>
  myCustomValue:{{ myCustomValue }}
  <button @click="changeCustomRef()">改變customRef</button>
</template>
<script>
import { ref, shallowReactive, shallowRef, triggerRef ,customRef} from "vue";
export default {
  setup() {
    //改變ref
    const valueRef = ref(0);
    function changeRef() {
      valueRef.value++;
    }
    //改變ShallowRef
    const valueShallowRef = shallowRef({
      name: "犬夜叉",
    });
    function changeShallowRef() {
      valueShallowRef.value.name = "殺生丸";
      console.log(valueShallowRef.value.name);
    }
    function changeShallowRef2() {
      valueShallowRef.value = { name: "殺生丸" };
      console.log(valueShallowRef.value.name);
    }
    function changeTriggerRef() {
      valueShallowRef.value.name = "殺生丸";
      console.log(valueShallowRef.value.name);
      triggerRef(valueShallowRef);
    }
    function myCustomRef(value) {
      return customRef((track, trigger) => {
        return {
          get() {
            //追蹤
            track();
            return  value+"愛你破爛的衣裳";
          },
          set(newValue) {
            value = newValue;
            //觸發(fā)更新
            trigger();
          },
        };
      });
    }
    const myCustomValue = myCustomRef("奈落");
    function changeCustomRef() {
      myCustomValue.value = "米勒法師";
      console.log(myCustomValue.value);
    }

    return {
      valueRef,
      changeRef,
      valueShallowRef,
      changeShallowRef,
      changeShallowRef2,
      changeTriggerRef,
      myCustomValue,
      changeCustomRef,
    };
  },
};
</script>