computed 计算属性
计算属性基于 data 中声明过或者父组件传递的 props 中的数据通过计算得到的一个新值,这个新值只会根据已知值的变化而变化,简言之:这个属性依赖其他属性,由其他属性计算而来的。
实例:
<p>姓名:{{ fullName }}</p>
... ...
data: {
firstName: 'David',
lastName: 'Beckham'
},
computed: {
fullName: function() { //方法的返回值作为属性值
return this.firstName + ' ' + this.lastName
}
}
以属性访问的形式调用,即在页面中使用 {{ 方法名 }} 来显示计算的结果。
此外computed有一个重要的特点,就是 computed 带有缓存功能。只有当 computed 属性被使用后,才会执行 computed 的代码,在重复的调用中,只要依赖数据不变,直接取缓存中的计算结果。只有依赖型数据发生改变,computed 才会重新计算。
watch 监听属性
通过 vm 对象的 $watch() 或 watch 配置来监听 Vue 实例上的属性变化,或某些特定数据的变化,然后执行某些具体的业务逻辑操作。当属性变化时,回调函数自动调用,在函数内部进行计算。其可以监听的数据来源:data,props,computed 内的数据。
实例:
watch: {
// 监听 data 中的 firstName,如果发生了变化,就把变化的值给 data 中的 fullName, val 就是 firstName 的最新值
firstName: function(val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function(val) {
this.fullName = this.firstName + ' ' + val
}
}
// 由上可以看出 watch 要监听两个数据,而且代码是同类型的重复的,所以相比用 computed 更简洁
注:监听函数有两个参数,第一个参数是最新的值,第二个参数是输入之前的值,顺序一定是新值,旧值,如果只写一个参数,那就是最新属性值。
此外,watch有两个选项需要注意,一个是immediate,另一个是deep。
data: {
fullName: {
firstName: 'Peter',
lastName: 'Parker'
}
},
watch: {
fullName: {
handler(newVal, oldVal) {
console.log(newVal);
console.log(oldVal);
},
deep: true//监听一个对象内部的变化 默认为否
immediate: true//是否在第一次渲染的时候要执行这个函数 默认为否
}
}
如何回答computed和watch的区别
computed是计算属性的意思,watch是监听的意思。
computed:
1.computed是用来计算出一个值的,这个值在调用的时候不需要加括号,和取data对象里的数据属性一样,以属性访问的形式调用;
2.computed 属性值默认会缓存计算结果,在重复的调用中,只要依赖数据不变,直接取缓存中的计算结果,只有依赖型数据发生改变,computed 才会重新计算。
3.在computed中的,属性都有一个 get 和一个 set 方法,当数据变化时,调用 set 方法。
watch:
1.watch是用来监听的,它有2个选项immediate和deep。
2.immediate表示是否在第一次渲染的时候要执行这个函数。
deep如果我们监听一个对象那么是否要看里面的属性的变化。
定义:如果某个属性变化了我就去执行这个函数。
3.watch支持异步。
4.不支持缓存,监听的数据改变,直接会触发相应的操作;