1、响应式本质
就是把数据和函数相关联起来,当数据变化时,函数自动执行。当然这对于函数和数据也是有要求的
函数必须是以下几种:
render
computed
watch
watchEffect
数据必须是以下几种:
响应式数据
在函数中用到的数据
2、例子
2.1
responsive
传入的值:{{ count }}
doubled:{{doubleCount}}
import { ref, computed } from 'vue'
const props = defineProps({
count: {
type: Number,
default: 0
}
})
const doubleCount =ref(props.count * 2)
结果:
当我们点击增加按钮时,页面并没有发生变化,这是因为我们的doubleCount并没有响应式。
原因:const doubleCount =ref(props.count * 2)这一过程不涉及到任何函数,数据和数据之间是无法形成关联的,所以doubleCount并不是响应式的。
2.2
responsive
传入的值:{{ count }}
doubled:{{doubleCount}}
import { re服务器托管网f, computed ,watch服务器托管网Effect} from 'vue'
const props = defineProps({
count: {
type: Number,
default: 0
}
})
const doubleCount =ref(0)
watchEffect(() => {
console.log('watchEffect')
doubleCount.value = props.count * 2
})
结果:
当我们点击增加按钮时,页面发生了变化,这是因为我们的doubleCount是响应式的。
原因:
函数与数据关联起来了;
1、watchEffect是一个函数,props.count是一个响应式数据,且在watchEffect中用到了,所以props.count变化了,watchEffect就会执行,导致doubleCount变化;
2、doubleCount也是个响应式数据,在render函数中用到了,所以doubleCount变化了,render函数就会执行,更新页面。
2.3
responsive
传入的值:{{ count }}
doubled:{{doubleCount}}
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)
结果:
当我们点击增加按钮时,页面未发生变化。
原因:
useDouble函数传的参数是一个原始值,没有读到任何响应式数据。所以doubleCount不会更新,从而render函数也不会执行。
2.4
responsive
传入的值:{{ count }}
doubled:{{doubleCount}}
import { ref, computed ,watchEffect} from 'vue'
const props = defineProps({
count: {
type: Number,
default: 0
}
})
const doubleCount = computed(() => {
console.log('computed')
return props.count * 2
})
结果:
当我们点击增加按钮时,页面发生了变化。
原因:
1、computed是一个函数,props.count是一个响应式数据,且在computed中用到了,所以props.count变化了,computed就会执行,导致doubleCount变化;
2、doubleCount也是个响应式数据,在render函数中用到了,所以doubleCount变化了,render函数就会执行,更新页面。
2.5
responsive
传入的值:{{ count }}
doubled:{{doubleCount}}
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)
结果:
当我们点击增加按钮时,页面发生变化。
原因:
1、props是一个响应式数据,跟watchEffect关联起来了,所以当props.count变化时,watchEffect就会执行,导致doubleCount变化;
2、doubleCount也是个响应式数据,在render函数中用到了,所以doubleCount变化了,render函数就会执行,更新页面。
tips:VueUse库中的基本都是传的props。
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.fwqtg.net
2023-05-25:给定一个正整数 x,我们将会写出一个形如 x (op1) x (op2) x (op3) x … 的表达式 其中每个运算符 op1,op2,… 可以是加、减、乘、除之一 例如,对于 x = 3,我们可以写出表达式 3 * 3 / 3 …