Vue计算属性computed和监听属性watch的区别

我们希望一个变量是经过某种计算然后输出而不是直接输出的时候可以使用到计算属性，计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。而每次调用函数都会导致函数的重新执行。计算属性就是拿着Vue实例已有的属性计算或处理完后返回的一个全新的所以计算属性是一个属性，我们可以在插值语法中直接使用。

叶子yes

2856人浏览 · 2022-09-24 07:30:00

叶子yes · 2022-09-24 07:30:00 发布

一、computed计算属性

我们希望一个变量是经过某种计算然后输出而不是直接输出的时候可以使用到计算属性，计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。而每次调用函数都会导致函数的重新执行。

计算属性就是拿着Vue实例已有的属性计算或处理完后返回的一个全新的属性，所以计算属性是一个属性，我们可以在插值语法中直接使用。

<body>
	<div id="app">
		<input type="number" v-model.number="a">
		<input type="number" v-model.number="b">
		<!-- 直接使用插值语法读取计算属性 -->
		{{total}}
	</div>
	<script>
		new Vue({
			el:"#app",
			data:{
				a:0,
				b:0,
				// 计算属性不能写在这里
				// total:0
			},
			computed:{
				// 重新返回属性 主要是处理data中需要计算/处理的属性 
				// 1.计算属性完整写法
				// total:{
				// 	// get作用：当有人读取total时，get就会被调用，且返回值就作为total的值
				// 	// get什么时候调用？1.初次读取total时 2.所依赖的数据发生改变时(即a或b发生改变时)
				// 	get(){
				// 		console.log('get被调用');
				// 		return this.a + this.b
				// 	},
				// 	// set什么时候调用？当total被修改时
				// 	set(value){
				// 		console.log('set',value);
				// 	}
				// }
				//--------------------------------------------------
				// 2.计算属性简写形式(只考虑读取get，不考虑修改set时才能简写)
				total(){
					console.log('这是computed');
					return this.a + this.b
				}
			},
		})
	</script>
</body>

computed和methods的区别

计算属性有依赖缓存，如果值没有发生变化是不会重新调用计算属性；而methods没有缓存，每次调用都会重新执行/渲染。

<body>
	<div id="app">
		{{total}}
		{{total}}
		{{total}}
		{{str()}}
		{{str()}}
		{{str()}}
	</div>
	<script>
		new Vue({
			el:"#app",
			data:{
				a:0,
				b:0
			},
			computed:{
				total(){
					console.log('这是computed');
					return this.a + this.b
				}
			},
			methods:{
				str(){
					console.log('这是methods');
				}
			}
		})
	</script>
</body>

二、watch监听属性

监听属性也叫监听器/侦听器

当需要在数据变化时执行异步或开销较大的操作时，使用监听器是最有用的。

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

监视属性用来监视已经存在的属性，当监视属性变化时，回调函数自动调用，进行相关操作。

监视属性两种写法：

（1）在Vue实例的watch配置项中写

（2）通过vm.$watch()监视

<body>
	<div id="app">
		<input type="number" v-model.number="a">
		<input type="number" v-model.number="b">
		{{total}}
	</div>
	<script>
		let vm = new Vue({
			el: "#app",
			data: {
				a: 0,
				b: 0,
				total: 0
			},
			watch: {
				// 我们需要监听a和b属性 (也可以监听计算属性)
				//1.完整写法
				// a: {
				// 	// handler是固定配置
				// 	// handler什么时候调用？当a发生改变时调用
				// 	// handler有两个参数，一个是修改后的值，一个是修改前的值
				// 	handler(newValue, oldValue) {
				// 		console.log('a被修改了', newValue, oldValue);
				// 		this.total = this.a + this.b
				// 	},
				// 	// 其他配置项
				// 	immediate: true //初始化时让handler调用一下
				// }
				//-------------------------------------------
				// 2.简写
				a(newVal, oldVal) {
					console.log(newVal,oldVal,'这是监听器');
					this.total = this.a + this.b
				},
				b() {
					this.total = this.a + this.b
				}
			},
		})

		// 3.也可以使用vm.$watch(需要监听的属性,{配置项})实现监听
		// vm.$watch('a',{
		// 	handler(newValue,oldValue){
		// 		console.log('a被修改了',newValue,oldValue);
		// 	}
		// })
	</script>
</body>

深度监听

vue中的watch默认不监听对象内部值的改变，我们通过配置deep:true即可实现深度监视。

<body>
	<div id="app">
		<input type="number" v-model="a">
		<input type="number" v-model="b">
		<input type="text" v-model="obj.name">
	</div>
	<script>
		new Vue({
			el: "#app",
			data: {
				a: 0,
				b: 0,
				total: 0,
				obj: {
					name: "zhangsan",
					age: 12
				}
			},
			watch: {
				// 监听基本数据类型
				a() {
					console.log('a被改变了');
				},
				b: {
					handler() {
						console.log('b被改变了');
					}
				},
				// 监听引用数据类型
				obj: {
					// 浅监听
					handler(newValue, oldValue) {
						console.log(newValue.name, oldValue.name);
					},
					// 递归监听 深度监听
					deep: true
				}
			},
		})
	</script>
</body>

watch 和computed区别

computed

1、具有缓存性，页面重新渲染值不变化，计算属性会立即返回之前的计算结果，而不必再次执行函数

2、计算属性计算某一个属性的变化，如果某一个值改变了，计算属性会监听到进行返回

watch

1、监听值的变化，执行异步操作（axios请求）

2、无缓存性，只有当当前值发生变化时才会执行/响应

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^