一、什么是计算属性？
计算属性是自动监听依赖值的变化，从而动态返回内容。监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情。
特点：
<1>数据可以进行逻辑处理，减少模板中计算逻辑
<2>对计算属性中的数据进行监视
<3>依赖固定的数据类型（响应式数据）
二、计算属性的组成？
计算属性由两部分组成，get和set分别用来获取和设置计算属性，默认只有get，如果想要有set需要自己设置，另外set不能直接修改计算属性，修改的只是依赖
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
//this.fullName = newValue 这种写法会报错
var names = newValue.split(' ')
this.firstName = names[0]//对它的依赖进行赋值
this.lastName = names[names.length - 1]
}
}
}
三、计算属性和普通属性
可以像绑定普通属性一样在模板中绑定计算属性，但是它们在定义上有区别，即计算属性的属性值必须是一个函数
data:{ //普通属性
msg:'行舟',
},
computed:{ //计算属性
msg2:function(){ //该函数必须有返回值，用来获取属性，称为get函数
return '浪里行舟';
},
reverseMsg:function(){
//可以包含逻辑处理操作，同时reverseMsg依赖于msg,一旦msg发生变化，reverseMsg也会跟着变化
return this.msg.split(' ').reverse().join(' ');
}
}
四、计算属性和方法
两者主要的区别，computed 是可以缓存的，methods 不能缓存；只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存的计算结果，就不会多次执行。网上有种说法就是方法可以传参，而计算属性不能，其实并不准确，计算属性可以通过闭包来实现传参
五、侦听属性
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性watch。Watch中可以执行任何逻辑，如函数节流、Ajax异步获取数据，甚至操作dom
1.常规用法
<template>
<div class="attr">
<h1>watch属性</h1>
<h2>{{ $data }}</h2>
<button @click="() => (a += 1)">修改a的值</button>
</div>
</template>
<script>
export default {
data() {
return {
a: 1,
b: { c: 2, d: 3 },
e: {
f: {
g: 4
}
},
h: []
};
},
watch: {
a: function(val, oldVal) {
this.b.c += 1;
},
"b.c": function(val, oldVal) {
this.b.d += 1;
},
"b.d": function(val, oldVal) {
this.e.f.g += 1;
},
e: {
handler: function(val, oldVal) {
this.h.push("浪里行舟");
},
deep: true //用于监听e对象内部值的变化
}
}
};
</script>
2.使用 watch 的深度遍历和立即调用功能
使用 watch 来监听数据变化的时候除了常用到的 handler 回调，其实还有两个参数，它们是：
deep 设置为 true 用于监听对象内部值的变化
immediate 设置为 true 将立即以表达式的当前值触发回调
<template>
<button @click="obj.a = 2">修改</button>
</template>
<script>
export default {
data() {
return {
obj: {
a: 1,
}
}
},
watch: {
obj: {
handler: function(newVal, oldVal) {
console.log(newVal);
},
deep: true,
immediate: true
}
}
}
</script>
两者之间的区别
watch：监测的是属性值， 只要属性值发生变化，其都会触发执行回调函数来执行一系列操作；
computed：监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算。
除此之外，有点很重要的区别是：计算属性不能执行异步任务，计算属性必须同步执行。也就是说计算属性不能向服务器请求或者执行异步任务。如果遇到异步任务，就交给侦听属性。Watch也可以检测computed属性。
网友评论