每日一題：探究響應式本質，以最簡單的方式理解響應式

1、響應式本質

就是把資料和函數相關聯起來，當資料變化時，函數自動執行。當然這對於函數和資料也是有要求的

函數必須是以下幾種:

render

computed

watch

watchEffect

資料必須是以下幾種：

響應式資料

在函數中用到的資料

2、例子

2.1

<template>
  <div class="responsive">
    <h1>responsive</h1>
    <div>傳入的值:{{ count }}</div>
    <br>
    <div>doubled:{{doubleCount}}</div>
    <br>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
const props = defineProps({
  count: {
    type: Number,
    default: 0
  }
})
const doubleCount =ref(props.count * 2)
</script>

<style scoped>

</style>

結果：

當我們點選增加按鈕時，頁面並沒有發生變化，這是因為我們的doubleCount並沒有響應式。

原因：const doubleCount =ref(props.count * 2)這一過程不涉及到任何函數，資料和資料之間是無法形成關聯的，所以doubleCount並不是響應式的。

2.2

<template>
  <div class="responsive">
    <h1>responsive</h1>
    <div>傳入的值:{{ count }}</div>
    <br>
    <div>doubled:{{doubleCount}}</div>
    <br>
  </div>
</template>

<script setup>
import { ref, computed ,watchEffect} from 'vue'
const props = defineProps({
  count: {
    type: Number,
    default: 0
  }
})
const doubleCount =ref(0)
watchEffect(() => {
  console.log('watchEffect')
  doubleCount.value = props.count * 2
})
</script>

<style scoped>

</style>

結果:

當我們點選增加按鈕時，頁面發生了變化，這是因為我們的doubleCount是響應式的。

原因:
函數與資料關聯起來了；

1、watchEffect是一個函數，props.count是一個響應式資料，且在watchEffect中用到了，所以props.count變化了，watchEffect就會執行，導致doubleCount變化；
2、doubleCount也是個響應式資料，在render函數中用到了，所以doubleCount變化了，render函數就會執行，更新頁面。

2.3

<template>
  <div class="responsive">
    <h1>responsive</h1>
    <div>傳入的值:{{ count }}</div>
    <br>
    <div>doubled:{{doubleCount}}</div>
    <br>
  </div>
</template>

<script setup>
import { ref, computed ,watchEffect} from 'vue'
const props = defineProps({
  count: {
    type: Number,
    default: 0
  }
})
function useDouble(count) {
  const doubleCount =ref(0)
  watchEffect(() => {
    console.log('watchEffect')
    doubleCount.value = count * 2
  })
  return doubleCount
}
const doubleCount = useDouble(props.count)

</script>

<style scoped>

</style>

結果:

當我們點選增加按鈕時，頁面未發生變化。

原因:
useDouble函數傳的引數是一個原始值，沒有讀到任何響應式資料。所以doubleCount不會更新，從而render函數也不會執行。

2.4

<template>
  <div class="responsive">
    <h1>responsive</h1>
    <div>傳入的值:{{ count }}</div>
    <br>
    <div>doubled:{{doubleCount}}</div>
    <br>
  </div>
</template>

<script setup>
import { ref, computed ,watchEffect} from 'vue'
const props = defineProps({
  count: {
    type: Number,
    default: 0
  }
})
const doubleCount = computed(() => {
  console.log('computed')
  return props.count * 2
})

</script>

<style scoped>

</style>

結果:

當我們點選增加按鈕時，頁面發生了變化。

原因:

1、computed是一個函數，props.count是一個響應式資料，且在computed中用到了，所以props.count變化了，computed就會執行，導致doubleCount變化；
2、doubleCount也是個響應式資料，在render函數中用到了，所以doubleCount變化了，render函數就會執行，更新頁面。

2.5

<template>
  <div class="responsive">
    <h1>responsive</h1>
    <div>傳入的值:{{ count }}</div>
    <br>
    <div>doubled:{{doubleCount}}</div>
    <br>
  </div>
</template>

<script setup>
import { ref, computed ,watchEffect} from 'vue'
const props = defineProps({
  count: {
    type: Number,
    default: 0
  }
})
function useDouble(props) {
  const doubleCount =ref(0)
  watchEffect(() => {
    console.log('watchEffect')
    doubleCount.value = props.count * 2
  })
  return doubleCount
}
const doubleCount = useDouble(props)

</script>

<style scoped>

</style>

結果:

當我們點選增加按鈕時，頁面發生變化。
原因:
1、props是一個響應式資料，跟watchEffect關聯起來了，所以當props.count變化時，watchEffect就會執行，導致doubleCount變化；
2、doubleCount也是個響應式資料，在render函數中用到了，所以doubleCount變化了，render函數就會執行，更新頁面。

tips:VueUse庫中的基本都是傳的props。