Vue中computed(计算属性)、methods和watch（侦听器）的区别

最新推荐文章于 2024-04-17 22:54:01 发布

不染126

最新推荐文章于 2024-04-17 22:54:01 发布

阅读量160

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_59541478/article/details/127045400

版权

1.computed和methods

计算属性有依赖缓存，如果值没有变化是不会重新调用计算属性的,也不处理异步请求；而methods没有缓存，调用一次它就会重新执行一次，并且会发送异步请求，下面通过一个案例说明这两个的区别：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
</head>
<body>
	<div id="app">
		<!-- {{total}}
		{{total}}
		{{total}}
		{{total}}
		{{str()}}
		{{str()}}
		{{str()}}
		{{str()}} -->

		<input type="number" v-model.number="a">
		<input type="number" v-model.number="b">

		{{total}} --- {{upper}}
	</div>
	<script>
		// 计算属性 computed和methods得区别?
		// 计算属性有依赖缓存 如果值没有发生变化是不会重新调用计算属性
		// methods没有缓存 每一个调用都会重新执行/渲染 发送异步请求
		// 计算属性不处理异步请求
		new Vue({
			el:"#app",
			data:{
				a:0,
				b:0,
				// total:0
				c:'hello',
				d:[1,2,3,4]
			},
			computed:{
				// 重新返回属性 主要是处理data中需要计算/处理的属性 
				// total(){
				// 	console.log('计算属性');
				// 	return 111
				// }
				rever(){
					return this.d.reverse()
				},
				upper(){
					return this.c.toUpperCase()
				},
				total(){
					return this.a + this.b
				}
			},
			methods:{
				str(){
					console.log('这是methods');
					return 222
				}
			}
		})
	</script>
</body>
</html>

2.watch

监听器监听值的变化，可以执行异步操作，像axios请求，它没有缓存性，只有当当前值变化时才会执行。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
</head>
<body>
	<div id="app">
		<input type="number" v-model.number="a">
		<input type="number" v-model.number="b">
	</div>
	<script>
		new Vue({
			el:"#app",
			data:{
				a:0,
				b:0,
				total:0
			},
			watch:{
				a(newVal,oldVal){
					// console.log(newVal,oldVal,'这是监听器');
					this.total=this.a+this.b
				},
				b(){
					this.total=this.a+this.b
				}
			},
			methods:{}
		})
	</script>
</body>
</html>