6 - 浅层 ref

[jay6697117]

<script setup lang="ts">
import { ref, reactive, shallowRef, watch } from 'vue';

const state = shallowRef({ count: 1 });
// const state = ref({ count: 1 })
// const state = reactive({ count: 1 })

// Does NOT trigger
watch(
  state,
  () => {
    console.log('State.count Updated', state.value.count);
    // console.log("State.count Updated", state.count)
  },
  { deep: true }
);

/**
 * Modify the code so that we can make the watch callback trigger.
 */
// state.value.count = 2
// state.count = 200
state.value = { count: 200 };
</script>

<template>
  <div>
    <p>
      {{ state.count }}
    </p>
  </div>
</template>