看下
vue2 的 计算属性 computed
(有this ,但是 vue3 是没有的,我们说过vue3的this是undefined)
vue3的computed 函数
与vue2 中的computed 配置功能一致。
(注意的是简写会在修改的时候警告,所以我们按照完整写法写入。)
写法:
引入 computed
import {computed} from 'vue'
setup(){
完整写入方法
let fullName = computed({
get(){ //读取
return preson.firstName + '-' + preson.lastName
},
set(value){ // 修改
const nameArr = value.split(‘-’)
preson.firstName = nameArr[0]
preson.lastName = nameArr[1]
}
})
return {
fullName
}
}
先看下
vue2 中的监听 watch
vue2 中深度监听和立即监听
vue3 的watch 函数 监听(可以接收三个参数)
不过有两个坑要注意:
1:监听reactive定义的响应式数据时:oldvalue无法正确获取。强制开启了深度监听(deep配置失效)。
2:监听reactive定义响应式数据中某个属性时,deep配置有效。
代码展示
import {ref, reactive, watch} from 'vue'
setup(){
let sum = ref(0) // 一个
let msg = ref(‘你好啊’)// 多个
let preson = reactive({
name: '张三',
age: 18,
job:{
j1:{
xinzi:20
},
j2:{
xinzi: 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) // 打印下看看吧
},{immediate:true})
情况三:监听reactive 所定义的响应式数据(对象):
注意:1此处无法正确的获取oldvalue.
注意:2 强制开启了深度监听且deep配置无效
watch(person,(newValue,oldValue)=>{
console.log('person变化了', newValue, oldValue) // 有坑一,且目前无法解决,看官网后期怎优化
},{immdiate:true, deep:false}) // 这里的 deep配置无效
情况四: 监听reactive 所定义的响应式数据(对象)中的某个属性。
注意要写成一个函数形式,不能直接取监听对象属性
watch(()=>person.age,(newValue,oldValue)=>{
console.log('person变化了', newValue, oldValue) // 有坑一,且目前无法解决,看官网后期怎优化
},{ immdiate: true, deep: true})
情况五:监听reactive 所定义的响应式数据(对象)中的某写属性
watch([()=> person.name, ()=>person.age], (newValue,oldValue)=>{
console.log('person的name ,age 变化了', newValue, oldValue) // 有坑一,且目前无法解决,看官网后期怎优化
},{ immdiate: true, deep: true})
特殊情况:监听对象中的对象...(监听深度对象)
watch(()=>person.job,(newValue,oldValue)=>{
console.log('person的job变化了', newValue, oldValue) // 有坑一,且目前无法解决,看官网后期怎优化
},{ immdiate: true, deep: true})// 此处由于监听的是reactive 所定义的对象中的某个属性,所以deep配置有效。
return {
sum, msg,// 基础的数据
preson // 对象
}
}
情况二
情况三
情况四
情况五
总结