computed methods watch 的区别

computed

**特点**:
具有缓存性 如果某一个值没有发生改变 计算属性不会重新执行/响应
计算某一个属性,只要其中一个变量发生变化,计算属性就可以监听到处理之后并返回
不会执行异步操作
不会存在vue变量中 新建一个属性并返回

methods

**特点:**无缓存性 只要调用就重新执行
		可以封装函数和发送异步请求

watch(侦听器/监听器)

监听属性变量的变化
**特点**:
无缓存性,只有值发生变化得时候才可以监听到
	执行开销较大,异步操作 
	
'$route.query':{
	handler(){
		this.name=this.$route.query.name;
		this.loadArtilce()
	},
	deep:true
}

1.浅监听  ---基本数据类型
	a(n,o){
		.....
	}
	a:{
		handler(){

		}
	}
	
2.深监听 ---监听引用数据类型
	obj:{
		handler(){

		},
		deep:true 
	}

methods一般运用在需要主动触发的事件上,computed则是用在响应对某个数据的处理上。
computed依靠自己的依赖进行缓存,因为着只要依赖的变量不变,计算属性返回的值永远是原来运行的结果。而methods每次渲染调用就会和函数一样重新执行一次。

computed肯定是要有return

computed (计算属性) 和 methods (方法) 的区别:
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。

也就是说:
函数执行需要 数据属性里面的 message 值作为参数。

● 如果使用 methods 执行函数,vue 每次都要重新执行一次函数,不管message 的值是否有变化;

● 如果使用computed 执行函数,只有当message 这个最初的数据发生变化时,函数才会被执行。(依赖-监测数据变化)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值