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
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论

打赏作者

小刘先生很努力

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值