computed
- 与Vue2.x中computed配置功能一致
- 写法
import {
computed} from 'vue'
setup(){
...
//计算属性——简写
let fullName = computed(()=>{
return person.firstName + '-' + person.lastName
})
//计算属性——完整
let fullName = computed({
get()
return person.firstName + '-' + person.lastName
},
set(value){
const nameArr = value.split('-')
person.firstName = nameArr[0]
person.lastName = nameArr[1]
}
})
}
watch
- 注意
- 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。
- 监视reactive定义的响应式数据中的某个属性时：deep配置有效。
情况一：监视ref定义的响应式数据
- 监视ref定义的对象，改变某一个属性时，newValue和oldValue是同一个值;
- 若改变整个对象newValue和oldValue不一样;
watch(sum, (newValue, oldValue) => {
console.log('sum变化了', newValue, oldValue)
}, {
immediate: true})
情况二：监视多个ref定义的响应式数据(写成数组格式)
watch([sum, msg], (newValue, oldValue) => {
console.log('sum或msg变化了', newValue, oldValue)
})
情况三：监视reactive定义的响应式数据,deep默认开启，且关不掉
watch(person, (newValue, oldValue) => {
console.log('person变化了', newValue, oldValue)
}, {
immediate: true, deep: false}) //此处的deep配置不再奏效
情况四：监视reactive定义的响应式数据中某个属性
- 可以监视整体改变，也可以监视某个属性改变
- 监视的属性不是【对象类型】，需写成函数
- 监视的属性是【对象类型】，可直接编，也可使用函数，推荐使用函数并添加deep属性
（因为直接写person，无法监听到整个对象的改变;deep是为了深层监听）
watch(() => person.job, (newValue, oldValue) => {
console.log('person的job变化了', newValue, oldValue)
}, {
immediate: true, deep: true})
情况五：监视reactive定义的响应式数据中某些属性
watch([() => person.job, () => person.name], (newValue, oldValue) => {
console.log('person的job变化了', newValue, oldValue)
}, {
immediate: true, deep: true})
特殊情况
watch(() => person.job, (newValue, oldValue) => {
console.log('person的job变化了', newValue, oldValue)
}, {
deep: true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效
停止监视
const stopWatch = watch(sum, (newValue, oldValue) => {
console.log('sum变化了', newValue, oldValue)
if (sum > 10) {
stopWatch() // 停止监视
}
})
watchEffect
watch的套路：既要指明监视的属性，也要指明监视的回调。
watchEffect的套路：不用指明监视的哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。
watchEffect有点像computed：
但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。
// watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。初始化也会执行一次
watchEffect(()=>{
const x1 = sum.value
const x2 = person.age
console.log('watchEffect配置的回调执行了')
})
