在vue项目中,虽然数据是实时变化的,但当某一个数据是根据其他数据的改变而改变,或这当某一个数据改变时,需要作出其他操作,这时候我们就需要用到computed 和watch。
1.computed 计算属性
计算属性的初衷是将双花括号内的逻辑提取出来,将复杂的逻辑使用计算属性。一般用于多个值通过计算得出一个值的结果。
<template>
<div class="container">
<div>{
{ tot }}</div>
</div>
</template>
<script>
export default {
data() {
return {
data1: 0,
data2: 1,
};
},
}
computed: {
tot() {
let rslt = this.data1 + this.data2;
return rslt;
// return this.data1 + this.data2;
},
},
计算属性将计算过程放置在一函数内,计算结果 return 出来,需要使用直接调用函数即可。如果要在mounted
,或methods
中的函数中获取计算属性的值,可以通过this.函数名
获取,这个例子就是this.tot
。
不要写成这样
data() {
return {
data1: 0,
data2: 1,
rslt: 0,
};
},
computed: {
tot() {
this.rslt = this.data1 + this.data2;
return this.rslt;
},
},
会报错Unexpected side effect in "xxx" computed property vue/no-side-effects-in-computed-properties
。
因为计算属性中应当仅包含用于返回值的计算,不应该包含 DOM 操作,修改外部变量,异步操作等。
2:watch侦听器
当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。通常用于一个值得改变引起其他的变化。
<template>
<div class="container">
<div>{
{ data }}</div>
<div>{
{ status }}</div>
</div>
</template>
export default {
data() {
return {
data: 0,
status: "",
};
},
watch: {
data(newValue, oldValue) {
console.log("newValue", newValue, "oldValue", oldValue);
this.status = newValue % 2 === 0 ? "偶数" : "奇数";
},
},
}
watch 里面是你需要监听的数据,可以传入参数,变化后的值,和变化前的值,也可以只写一个变化后的值。
watch: {
data(value) {
this.status = value % 2 === 0 ? "偶数" : "奇数";
},
},
也可以不传值,直接通过this访问
watch: {
data() {
this.double = this.data * 2;
},
},
如有错误,欢迎指正,谢谢!
以上内容仅供参考,欢迎大家讨论。