vue3 响应式理解

现在有个两个组件

第一个

// 父组件
<template>
   <Demo :count="count"></Demo>
  <button  @click="count++">增加</button>
</template>

<script setup>
 import { ref } = 'vue';
 import Demo from './Demo.vue'

 const count = ref(0)
</script>

// 子组件
<template>
  <div>得到的属性值：{{ count }}</div>
  <div>得到新的值：{{doubleCount }}</div>
</template>

<script setup>

  import { computed,  ref, watchEffect } from 'vue';
 
 const props = defineProps({ count: Number })
 
</script>

现在有 五种情况 请问在这五中情况下，点击增加按钮  doubleCount 会变化吗？

1、const doubleCount = ref(props.count * 2)

答案：（不会）

2、const doubleCount = ref(0)

     watchEffect(()=>{

        doubleCount.value = props.count * 2;

        });        

答案：（会）

3、function useDouble(count) {

    const doubleCount = ref(count  * 2)

    watchEffect(()=>{

        doubleCount.value = count * 2;

   }); 

    return doubleCount

}

const  doubleCount = useDouble (props.count)

答案：（不会）

4、const  doubleCount = computed(()=>props.count * 2)

答案：（会）

5、function useDouble(count) {

    const  doubleCount = computed(()=>count * 2)

    return doubleCount

}

const  doubleCount = useDouble (props.count)

答案：（不会）

有没有想过为什么？

下面我们来探讨一下

首先我们理解什么是响应式，响应式描述的是函数与数据的关联，不是数据与数据的关联，数据与数据是无法关联的

既然是函数与数据的关联，那么什么函数与什么数据关联呢？

涉及到以下三点 

1、被监控的函数  

     ( 被谁监控呢vue2 中 是 watcher   vue3  effect）

     如果不太熟悉 我们常用的 比如说 render、computed 回调、watchEffect 、 watch

2、函数运行期间用到了响应式数据（ref, reactive）

3、响应式变化会导致函数重新运行

 那么基于以上三点 我们来了解上面五中情况究竟是为什么？

问题 1、const doubleCount = ref(props.count * 2)

  响应式描述的是函数与数据的关联； props.count  是 数据     doubleCount 是数据  所以是无法关联的

 问题 2、const doubleCount = ref(0)

     watchEffect(()=>{

        doubleCount.value = props.count * 2;

        });  

watchEffect 函数 和  props.count 数据 发生了关联 ，并且函数是被监控的并且props是响应式的；所以 就可以了

问题 3、function useDouble(count) {

    const doubleCount = ref(count * 2)

    watchEffect(()=>{

        doubleCount.value = count * 2;

   }); 

    return doubleCount

}

const  doubleCount = useDouble (props.count)

我们根据以上三点 按个判断，有被监控的函数吗  有 watchEffect  ； 函数运行期间用到了响应式数据了吗 我们来看 watchEffect 里面的内容  count ， count 是原始数据类型，原始类型是 不能作为响应式数据的，响应式数据只能是对象，然后你会发现 虽然有被监控的函数，但是没有用到任何响应式数据，就无法重新执行函数 ；那我我们怎么修改才能变成响应式的呢

function useDouble(props) {

    const doubleCount = ref(props.count * 2)

    watchEffect(()=>{

        doubleCount.value = props.count * 2;

   }); 

    return doubleCount

}

const  doubleCount = useDouble (props)

这样就可以了 因为props 是响应式的

问题 4、const  doubleCount = computed(()=>props.count * 2)

computed 是被监控的， props.count是 响应式数据  所以没问题

问题 5、function useDouble(count) {

    const  doubleCount = computed(()=>count * 2)

    return doubleCount

}

const  doubleCount = useDouble (props.count)

问题 5 和 问题 3 是一样的 computed 虽然是被监控的函数，count缺 不是响应式数据

可以更改 成 

function useDouble(props) {

    const  doubleCount = computed(()=>props.count * 2)

    return doubleCount

}

const  doubleCount = useDouble (props)

记住  响应式是函数 与数据 的关联

希望能够帮到你！