Vue的计算属性和侦听器

两者的区别:

computed:依赖多个变量计算出一个变量,具有缓存机制,依赖值不变的时候,会复用计算值,不能执行异步操作,

watch:通常监听一个变量,可以执行异步操作

简单记就是:computed是多对一,watch是一对多

1|0计算属性(computed)

为什么要用计算属性?

当一个数据需要复杂的计算的时候,你可以在模板里面直接计算,但是太过麻烦,也不利于维护,这就需要计算属性

计算属性是放在vue实例的computed中定义的,与data,methods类似,都是定义函数

例如:

要计算这个数据里面所有的price

	list: [
				{ id: 1, name: "三国", price: 118 },
				{ id: 2, name: "水浒", price: 210 },
				{ id: 3, name: "红楼", price: 88 },
				{ id: 4, name: "西游", price: 65 },
			],

我们可以在模板里

<<h2>总价格:{{list[0].price+list[1].price+list[2].price+list[3].price}}</h2>

用计算属性来写

computed: {
		sum() {
			let total = 0;
			this.list.forEach((item) => {
				total += item.price;
			});
			return total;
		},
	},

再看模板里面

 <h2>总价格:{{ sum }}</h2>

2|0计算属性的set和get方法

2|1详细的计算属性写法

computed: {
      sum:{
      set: function () {
      },
      get: function () {
         let total = 0;
	this.list.forEach((item) => {
            total += item.price;
	 });
		return total;
      }
    }
}

get是读取,默认就是get方法,直接就写就可以

当数据发生改变的时候,你要重新计算,这个时候就需要set了

<template>
	<div>
		<p>{{ num }}</p>
		<p>{{ num1 }}</p>
		<button @click="changeNum1">点击改变num1的值</button>
	</div>
</template>

<script>
export default {
	data() {
		return {
			num: 8,
		};
	},
	computed: {
		num1: {
			get: function () {
				//必须有返回值，用来获取属性，称为get函数
				return this.num - 1;
			},
			set: function (val) {
				console.log("修改num1的值");
				this.num = 11;
			},
		},
	},
	methods: {
		changeNum1: function () {
			this.num1 = 11;
		},
	},
};
</script>

没有点击前点击之后

计算属性与method的比较?

不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

相比之下，每当触发重新渲染时，调用method方法将总会再次执行函数

为什么需要缓存？避免重复执行大数据量的计算

3|0侦听器(watch)

监听vue实例上某个数据的变化

侦听器完整的写法:

watch: {
		num: {//要监听的是哪个数据
            	handler(newValue, oldValue) {
				console.log(newValue, oldValue);//新的数据,旧的数据
			},
			// deep: 深度监听  默认为false  true为开启深度监听
                
                   // immediate: 立即执行  默认为false  true为开启
			
		},
	},

1.第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。
2.第二个是deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）缺点是会影响性能，尤其是对象内结构嵌套过深。
3.第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。

什么情况下，需要使用监听器？

当需要在数据变化时，执行异步或开销较大的操作时，这个方式是最有用的

比如说可以设置中间状态

__EOF__

本文作者：长安
本文链接：https://www.cnblogs.com/jingxin01/p/16414758.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！