Vue 计算属性用法解析
上一节:《Vue 监听器用法解析 》 | 下一节:《Vue 样式绑定》
jcLee95
已入驻阿里云博客
邮箱 :291148484@163.com
本文地址:
- https://developer.aliyun.com/article/
- https://blog.csdn.net/qq_28550263/article/details/127336309
目 录
1. 什么是计算属性
1.1 从一个引例说起
如果没有计算属性,我们返回的一些数据可能并不适合直接使用与模板中,而需要进行一些适当的转换,使之成为适合展示的形式。例如:
<template><p>年: {{ datetime.split(' ')[0].split('/')[0] }}</p><p>月: {{ datetime.split(' ')[0].split('/')[1] }}</p><p>日: {{ datetime.split(' ')[0].split('/')[2] }}</p></template><scriptsetuplang="ts">import { ref } from"vue"; constdatetime=ref('2022/06/01 17:30:00'); </script>
这里假定 datetime
是一个可能随时改变的变量。 可以看到,我们在模板语法里面写得比较“长”。实际上就是在模板中写了比较长得表达式,而表达式得结果是一个我们需要展示的值。
我们希望模板更为简洁,而不是写过长的表达式。计算属性就能够解决这个问题。
1.2 计算属性的概念
计算属性通过方法来描述一个获取一个值,这个值就像一个属性一样,只不过它是通过方法计算得来的。有了计算属性后:
<template><p>年: {{ year }}</p><p>月: {{ month }}</p><p>日: {{ day }}</p></template><scriptsetuplang="ts">import { ref, computed } from'vue'; constdatetime=ref('2022/06/01 17:30:00'); const_=datetime.value.split(' ')[0].split('/') constyear=computed(()=>{ return_[0] }) constmonth=computed(()=>{ return_[1] }) constday=computed(()=>{ return_[2] }) </script>
在这个例子中,一旦 datetime 改变后,计算属性 year、month、day 将获得新的值。
2. 计算属性的用法
2.1 选项式API下的计算属性使用
2.1.1 计算属性的完整写法
计算属性实际上由 getter 和 setter 两部分组成,它们分别用来 获取 和 设置 计算属性的值。例如:
<template><inputv-model="sn"type="input"placeholder="姓"name="s"/><br><inputv-model="fn"placeholder="名"type="input"name="f"/><br><inputv-model="name"placeholder="姓-名"type="input"name="n"/></template><scriptlang="ts">import { defineComponent, ref } from'vue'; exportdefaultdefineComponent({ data() { return { fn: ref(''), sn: ref(''), } }, computed:{ name:{ get(){ returnthis.sn+'-'+this.fn; }, set(_name:string){ [this.sn, this.fn] =_name.split('-'); } } } }) </script>
2.1.2 计算属性的简写法
2.2 组合式API下的计算属性使用
在 1.2 计算属性的概念 的案例中,我们使用的就是 组合式 API。相比与选项式 API, 使用组合式 API 时,需要导入computed
函数:
import { computed } from"vue";
完整的组合式 API 同样需要指定 getter 和 setter。例如:
<template><inputv-model="sn"type="input"placeholder="姓"name="s"/><br><inputv-model="fn"placeholder="名"type="input"name="f"/><br><inputv-model="name"placeholder="姓-名"type="input"name="n"/></template><scriptsetuplang="ts">import { computed, ref } from"vue"; constsn=ref(''); constfn=ref(''); constname=computed({ get() { returnsn.value+'-'+fn.value }, set(_name:string){ [sn.value, fn.value] =_name.split('-') } }) </script>
2.3 触发重新计算的条件
在计算属性的使用中,一个很重要的问题就是,什么情况下将会触发 计算属性 值的改变。换句话说,也就是什么情况下计算属性将重新计算。对我们来说最终计算属性的值是通过计算属性的 getter 获取的,问题就转换为:getter 什么时候调用。
vue 在以下情况下会重新调用 getter:
- 初次读取该计算属性时;
- 该计算属性所依赖的数据发生改变时。
在上面这两种情况都会触发 getter 的调用,进一步实现数据的更新。
3. 计算属性与方法(函数)的比较
可能你已经看出来,从效果上看,计算属性实际上就是通过函数计算得到一个属性值,这使用函数(方法)完全可以实现同样的效果。例如使用计算属性:
<template><p>{{ now }}</p></template><scriptsetuplang="ts">import { computed } from'vue'; constnow=computed(()=>{ returnDate.now() }) </script>
使用方法(函数):
<template><p>{{ now() }}</p></template><scriptsetuplang="ts">constnow= ()=>{ returnDate.now() } </script>
效果是一样的。既然这样那么我们为什么还需要使用计算属性呢——换句话说,计算属性和普通函数有什么不同呢?
在 Vue 中,若我们将 同样的函数 定义为一个 方法 而不是 计算属性 ,两种方式在结果上确实是完全相同的。
不同之处在于 计算属性值会基于其 响应式依赖 被缓存。 一个 计算属性 仅 会在其 响应式依赖 更新时才会进行 重新计算。
再举一个例子:
<template><inputv-model="str"/><p>{{ msg }}</p><p>{{ msg }}</p><p>{{ msg }}</p></template><scriptsetuplang="ts">import { computed, ref } from'vue'; conststr=ref("Some words.") constmsg=computed(()=>{ returnstr}) </script>
在这个例子中,虽然有三次使用了'
{{ msg }}
'
,但是仅仅计算了一次,并将计算属性值缓存。换句话说,这三个值共用的是同一次计算,并没有计算三次。
4. 计算属性与监听器的比较
经常同一个功能使用 计算属性(computed)和监听器(watch)都可以实现。比如在 2.2 小节中的案例,是使用 computed 实现的:
<template><inputv-model="sn"type="input"placeholder="姓"name="s"/><br><inputv-model="fn"placeholder="名"type="input"name="f"/><br><inputv-model="name"placeholder="姓-名"type="input"name="n"/></template><scriptsetuplang="ts">import { computed, ref } from"vue"; constsn=ref(''); constfn=ref(''); constname=computed({ get() { returnsn.value+'-'+fn.value }, set(_name:string){ [sn.value, fn.value] =_name.split('-') } }) </script>
我们也可以改成使用 watch 实现:
<template><inputv-model="sn"type="input"placeholder="姓"name="s"/><br><inputv-model="fn"placeholder="名"type="input"name="f"/><br><inputv-model="fullname"placeholder="姓-名"type="input"name="n"/></template><scriptsetuplang="ts">import { watch, ref } from"vue"; constsn=ref(''); constfn=ref(''); constfullname=ref(''); watch(fullname, (newValue, oldValue)=>{ [sn.value, fn.value] =newValue.split('-') }) watch([sn, fn], ([new_sn, new_fn])=>{ fullname.value=new_sn+'-'+new_fn}) </script>
可以看出来,都实现了一样的功能。不过有时候计算属性可能会简单一些。比如上面的例子,定义的计算属性name
直接就可以作为值绑定到输入框上,不需要另外声明一个属性。而监听器则需要定义一个 fullname
变量作为其所监听的对象。
另外,在这个例子中如果需要给定一个初始姓名,计算属性只需要分别给 sn
和 fn
初值,而 name 将自动计算获得。但如果使用的时监听器,你需要同时给姓、名、全名正确的初始值。