vue3的 computed 计算属性 与 watch监听

看下

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  // 对象
	}
}

情况二
在这里插入图片描述
情况三
在这里插入图片描述
情况四
在这里插入图片描述
情况五
在这里插入图片描述
总结
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值