一、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] } }) }
二、computed名字案例
- 父组件:App组件
<template>
<Demo/>
</template>
<script>
import Demo from './components/Demo.vue'
export default {
name: 'App',
components:{Demo},
}
</script>
- 子组件:Demo组件
<template>
<div>
<h1>一个人的信息</h1>
姓:<input type="text" v-model="person.firstName"><br>
名:<input type="text" v-model="person.lastName"><br>
<span>全名:{{ person.fullName }}</span><br>
全名:<input type="text" v-model="person.fullName">
</div>
</template>
<script>
import { reactive, computed } from 'vue'
export default {
name: 'Demo',
setup() {
//数据
let person = reactive({
firstName: '张',
lastName: '三'
})
//计算属性——简写(没有考虑计算属性被修改的情况)
/* person.fullName = computed(()=>{
return person.firstName + '-' + person.lastName
}) */
//计算属性——完整写法(考虑读和写)
person.fullName = computed({
get() {
return person.firstName + '-' + person.lastName
},
set(value) {
const nameArr = value.split('-')
person.firstName = nameArr[0]
person.lastName = nameArr[1]
}
})
//返回一个对象(常用)
return {
person
}
}
}
</script>
三、Vue2中的watch
<template>
<div>
<h2>当前求和为:{{ sum }}</h2>
<button @click="sum++">点我+1</button>
</div>
</template>
<script>
export default {
data() {
return {
sum: 0
}
},
watch: {
// 简单写法
/* sum(newVal, oldVal) {
console.log('sum的值变化了:', newVal, oldVal);
} */
sum: {
immediate: true,
deep: true,
handler(newVal, oldVal) {
console.log('sum的值变化了:', newVal, oldVal);
}
}
}
}
</script>
三、watch函数
与Vue2.x中watch配置功能一致
两个小“坑”:
- 监视
reactive
定义的响应式数据时:oldValue
无法正确获取、强制开启了深度监视
(deep配置失效)。- 监视reactive定义的响应式数据中某个属性时:
deep配置有效。
let sum = ref(0)
let msg = ref('你好啊')
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
情况一:监视ref定义的响应式数据🤣
watch(sum,(newValue,oldValue)=>{
console.log('sum变化了',newValue,oldValue)
},{immediate:true})
情况二:监视多个ref定义的响应式数据🤣
watch([sum,msg],(newValue,oldValue)=>{
console.log('sum或msg变化了',newValue,oldValue)
})
情况三:监视reactive定义的响应式数据🤣
- 若watch监视的是reactive定义的响应式数据,则无法正确获得oldValue!!
- 若watch监视的是reactive定义的响应式数据,则强制开启了深度监视
watch(person,(newValue,oldValue)=>{
console.log('person变化了',newValue,oldValue)
},{immediate:true,deep:false}) //此处的deep配置不再奏效
情况四:监视reactive定义的响应式数据中的某个属性🤣
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配置有效
watch时value的的问题
setup() {
//数据
let sum = ref(0)
let msg = ref('你好啊')
let person = ref({
name: '张三',
age: 18,
job: {
j1: {
salary: 20
}
}
})
watch(sum, (newValue, oldValue) => {
console.log('sum的值变化了', newValue, oldValue)
})
watch(person, (newValue, oldValue) => {
console.log('person的值变化了', newValue, oldValue)
}, { deep: true })
五、watchEffect函数
-
watch的套路是
:既要指明监视的属性,也要指明监视的回调。 -
watchEffect的套路是
:不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性。 -
watchEffect有点像computed
:- 但computed注重的计算出来的值(回调函数的返回值),所以必须要写返回值。
- 而watchEffect更注重的是过程(回调函数的函数体),所以不用写返回值。
//watchEffect所指定的回调中用到的数据只要发生变化,则直接重新执行回调。
watchEffect(()=>{
const x1 = sum.value
const x2 = person.age
console.log('watchEffect配置的回调执行了')
})