现在有个两个组件
第一个
// 父组件
<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)
记住 响应式是函数 与数据 的关联
希望能够帮到你!