目录
两个重要API,反应应聘者熟练程度。
思路分析
- 先看两者定义,列举使用上的差异
- 列举使用场景上的差异,如何选择
- 使用细节、注意事项
- vue3变化
回答范例
- 计算属性可以从组件数据派生出新数据,最常见的使用方式是设置一个函数,返回计算之后的结果,computed和methods的差异是它具备缓存性,如果依赖项不变时不会重新计算。侦听器可以侦测某个响应式数据的变化并执行副作用,常见用法是传递一个函数,执行副作用,watch没有返回值,但可以执行异步操作等复杂逻辑。
- 计算属性常用场景是简化行内模板中的复杂表达式,模板中出现太多逻辑会是模板变得臃肿不易维护。侦听器常用场景是状态变化之后做一些额外的DOM操作或者异步操作。选择采用何用方案时首先看是否需要派生出新值,基本能用计算属性实现的方式首选计算属性。
- 使用过程中有一些细节,比如计算属性也是可以传递对象,成为既可读又可写的计算属性。watch可以传递对象,设置deep、immediate等选项。
- vue3中watch选项发生了一些变化,例如不再能侦测一个点操作符之外的字符串形式的表达式; reactivity API中新出现了watch、watchEffect可以完全替代目前的watch选项,且功能更加强大。
可能追问
- watch会不会立即执行 ?
- watch 和 watchEffect有什么差异 ?( vue3中的watchEffect )
1、不会立即执行,在监听到数据变化了才会改变,
指定 immediate: true 将立即以表达式的当前值触发回调,即在 wacth 中声明了 firstName 之后就会立即执行里面的 handler 方法,如果为 false 就跟原来的效果一样,不会在绑定的时候就执行
1. Computed介绍
computed 用来监控自己定义的变量,该变量在 data 内没有声明,直接在 computed 里面定义,页面上可直接使用。
//基础使用
{{msg}}
<input v-model="name" />
//计算属性
computed:{
msg:function(){
return this.name
}
}
在输入框中,改变 name 值得时候,msg 也会跟着改变。这是因为 computed 监听自己的属性 msg,发现 name 一旦变动,msg 立马会更新。
注意:msg 不可在 data 中定义,否则会报错(计算属性不可在data中定义,会报错)
1.1、get 和 set 用法
<input v-model="full" ><br>
<input v-model="first" > <br>
<input v-model="second" >
data(){
return{
first:'美女',
second:'姐姐'
}
},
computed:{
full:{
get(){ //回调函数 当需要读取当前属性值是执行,
// 根据相关数据计算并返回当前属性的值
return this.first + ' ' + this.second
},
set(val){ //监视当前属性值的变化,
//当属性值发生变化时执行,更新相关的属性数据
let names = val.split(' ')
this.first = names[0]
this.second = names[1]
}
}
}
get 方法:first 和 second 改变时,会调用 get 方法,更新 full 的值。
set 方法:修改 full 的值时,会调用 set 方法,val 是 full 的最新值。
1.2、计算属性缓存
计算属性是基于它们的依赖项的值结果进行缓存的,只要依赖的变量不变, 都直接从缓存取结果
我们通过方法,拼接数据,也可以实现该效果,代码如下。
<div> {{ full() }} </div>
data(){
return{
first:'美女',
second:'姐姐'
}
},
methods:{
full(){
return this.first + ' ' + this.second
}
}
一个页面内,数据有可能多次使用,我们把 computed 和 method 两个方法放一起实现,并把这个数据在页面内多次引用,试看以下效果。
<div>
computed计算值:
{{full}} {{full}} {{full}} {{full}}
</div>
<div>
methods计算值:
{{fullt}} {{fullt}} {{fullt}} {{fullt}}
</div>
data(){
return{
first:'美女',
second:'姐姐'
}
},
computed:{
full:function(){
console.log('computed')
return this.first + ' ' + this.second
}
},
methods:{
fullt(){
console.log('method')
return this.first + ' ' + this.second
}
}
运行结果为:
根据结果,我们不难发现,根据方法获取到的数据,使用几次就需要重新计算几次,但计算属性不是,而是基于它们的响应式依赖进行缓存的,之后依赖属性值发生改变的时候,才会重新计算。由于它计算次数少,所以性能更高些。
二、watch介绍
watch 是监测 Vue 实例上的数据变动,通俗地讲,就是检测 data 内声明的数据。不仅可以监测简单数据,还可以监测对象或对象属性。
监测简单数据
<input v-model="first" > <br>
data(){
return{
first:'美女',
}
},
watch:{
first( newVal , oldVal ){
console.log('newVal',newVal) // first 的最新值
console.log('oldVal',oldVal) // first上一个值
}
}
// 修改 first的值的时候,立马会打印最新值
监测对象
监听对象的时候,需要使用深度监听。
<input v-model="per.name">
data(){
return{
per:{
name:'倩倩',
age:'18'
}
}
},
watch:{
per:{
handler(oldVal,newVal){
console.log('newVal',newVal)
console.log('oldVal',oldVal)
},
deep:true,
}
},
修改 per.name 的时候,发现 newVal 和 oldVal 的值是一样的,是因为他们存储的指针指向的是同一个地方,所以深度监听虽然可以监听到对象的变化,但是无法监听到具体的是哪个属性发生变化了。
监听对象的单个属性
// 方法1:直接引用对象的属性
<input v-model="per.name">
data(){
return{
per:{
name:'倩倩',
age:'18'
}
}
},
watch:{
'per.name':function(newVal,oldVal){
console.log('newVal->',newVal)
console.log('oldVal->',oldVal)
}
}
也可以借助 computed 作为中间转换,如下:
借助computed
<input v-model="per.name">
data(){
return{
per:{
name:'倩倩',
age:'18'
}
}
},
watch:{
perName(){
console.log('name改变了')
}
},
computed:{
perName:function(){
return this.per.name
}
}
监听 props 组件传过来的值
props:{
mm:String
},
//不使用 immediate
watch:{
mm(newV,oldV){
console.log('newV',newV)
console.log('oldV',oldV)
}
}
//使用 immediate
watch:{
mm:{
immediate:true,
handler(newV,oldV){
console.log('newV',newV)
console.log('oldV',oldV)
}
}
不使用 immediate 时,第一次加载页面时,watch 监听的 mm 中的打印并没有执行。
使用 immediate 时,第一次加载时也会打印结果:newV 11 oldV undefined。
immediate 主要作用就是组件加载时,会立即触发回调函数。
对于 computed
-
computed 监控的数据在 data 中没有(不用)声明
-
computed 不支持异步,当 computed 中有异步操作时,无法监听数据的变化
-
computed 具有缓存,页面重新渲染,值不变时,会直接返回之前的计算结果,不会重新计算
-
如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,一般使用 - ------computed
-
computed 计算属性值是函数时,默认使用get方法。如果属性是完整写法时,属性有一个get和set方法,当数据发生变化时会调用set方法
computed:{ //属性值为函数 perName:function(){ return this.per.name }, //完整写法 full:{ get(){ }, set(val){ } } },
对于 watch
-
监测的数据必须在 data 中声明或 props 中数据
-
支持异步操作
-
没有缓存,页面重新渲染时,值不改变时也会执行
-
当一个属性值发生变化时,就需要执行相应的操作
-
监听数据发生变化时,会触发其他操作,函数有两个参数:
immediate :组件加载立即触发回调函数 deep:深度监听,主要针对复杂数据,如监听对象时,添加深度监听,任意的 属性值改变都会触发。 注意:对象添加深度监听之后,输出的新旧值是一样的。
computed 页面重新渲染时,不会重复计算,而 watch 会重新计算,所以 computed 性能更高些。
应用场景
当需要进行数值计算,并且依赖于其它数据时,应该使用 computed ,因为可以利用 computed 的缓存特性,避免每次获取值时都要重新计算。
当需要在数据变化时执行异步操作或开销较大的操作时,应该使用 watch,computed 不支持异步。如果需要限制执行操作的频率,可借助 computed 作为中间状态。