从入门到项目实战 - Vue 计算属性用法解析
Vue 计算属性用法解析
上一节：《Vue 监听器用法解析 》 | 下一节：《Vue 样式绑定》
jcLee95
已入驻博客
邮箱 ：291148484@163.com
本文地址：
- https://developer.aliyun.com/article/
- https://blog.csdn.net/qq_28550263/article/details/127336309
目 录
1. 什么是计算属性
- 1.1 从一个引例说起
- 1.2 计算属性的概念
2. 计算属性的用法
- 2.1 选项式API下的计算属性使用
- 2.2 组合式API下的计算属性使用
- 2.3 触发重新计算的条件
3. 计算属性与方法的比较
4. 计算属性与监听器的比较
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>
script setup lang="ts">
import {
ref }
from "vue";
const datetime=ref('2022/06/01 17:30:00');
/script>
这里假定 datetime 是一个可能随时改变的变量。 可以看到，我们在模板语法里面写得比较“长”。实际上就是在模板中写了比较长得表达式，而表达式得结果是一个我们需要展示的值。
我们希望模板更为简洁，而不是写过长的表达式。计算属性就能够解决这个问题。
1.2 计算属性的概念
计算属性通过方法来描述一个获取一个值，这个值就像一个属性一样，只不过它是通过方法计算得来的。有了计算属性后：
template>
p>
年： {
{
year }
}
/p>
p>
月： {
{
month }
}
/p>
p>
日： {
{
day }
}
/p>
/template>
script setup lang="ts">
import {
ref, computed }
from 'vue';
const datetime = ref('2022/06/01 17:30:00');
const _ = datetime.value.split(' ')[0].split('/')
const year = computed(()=>
{
return _[0]
}
)
const month = computed(()=>
{
return _[1]
}
)
const day = computed(()=>
{
return _[2]
}
)
/script>
在这个例子中，一旦 datetime 改变后，计算属性 year、month、day 将获得新的值。
2. 计算属性的用法
2.1 选项式API下的计算属性使用
2.1.1 计算属性的完整写法
计算属性实际上由 getter 和 setter 两部分组成，它们分别用来 获取 和 设置 计算属性的值。例如：
template>
input v-model="sn" type="input" placeholder="姓" name="s" />
br>
input v-model="fn" placeholder="名" type="input" name="f" />
br>
input v-model="name" placeholder="姓-名" type="input" name="n" />
/template>
script lang="ts">
import {
defineComponent, ref }
from 'vue';
export default defineComponent({
data() {
return {
fn: ref(''),
sn: ref(''),
}
}
,
computed:{
name:{
get(){
return this.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>
input v-model="sn" type="input" placeholder="姓" name="s" />
br>
input v-model="fn" placeholder="名" type="input" name="f" />
br>
input v-model="name" placeholder="姓-名" type="input" name="n" />
/template>
script setup lang="ts">
import {
computed, ref }
from "vue";
const sn = ref('');
const fn = ref('');
const name = computed({
get() {
return sn.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>
script setup lang="ts">
import {
computed }
from 'vue';
const now = computed(()=>
{
return Date.now()
}
)
/script>
使用方法（函数）：
template>
p>
{
{
now() }
}
/p>
/template>
script setup lang="ts">
const now = ()=>
{
return Date.now()
}
/script>
效果是一样的。既然这样那么我们为什么还需要使用计算属性呢——换句话说，计算属性和普通函数有什么不同呢？
在 Vue 中，若我们将 同样的函数 定义为一个 方法 而不是 计算属性 ，两种方式在结果上确实是完全相同的。
不同之处在于 计算属性值会基于其 响应式依赖 被缓存。 一个 计算属性 仅 会在其 响应式依赖 更新时才会进行 重新计算。
再举一个例子：
template>
input v-model="str" />
p>
{
{
msg }
}
/p>
p>
{
{
msg }
}
/p>
p>
{
{
msg }
}
/p>
/template>
script setup lang="ts">
import {
computed, ref }
from 'vue';
const str = ref("Some words.")
const msg = computed(()=>
{
return str
}
)
/script>
在这个例子中，虽然有三次使用了'p>
{
{
msg }
}
/p>
'，但是仅仅计算了一次，并将计算属性值缓存。换句话说，这三个值共用的是同一次计算，并没有计算三次。
4. 计算属性与监听器的比较
经常同一个功能使用 计算属性（computed）和监听器（watch）都可以实现。比如在 2.2 小节中的案例，是使用 computed 实现的：
template>
input v-model="sn" type="input" placeholder="姓" name="s" />
br>
input v-model="fn" placeholder="名" type="input" name="f" />
br>
input v-model="name" placeholder="姓-名" type="input" name="n" />
/template>
script setup lang="ts">
import {
computed, ref }
from "vue";
const sn = ref('');
const fn = ref('');
const name = computed({
get() {
return sn.value + '-' + fn.value
}
,
set(_name:string){
[sn.value, fn.value] = _name.split('-')
}
}
)
/script>
我们也可以改成使用 watch 实现：
template>
input v-model="sn" type="input" placeholder="姓" name="s" />
br>
input v-model="fn" placeholder="名" type="input" name="f" />
br>
input v-model="fullname" placeholder="姓-名" type="input" name="n" />
/template>
script setup lang="ts">
import {
watch, ref }
from "vue";
const sn = ref('');
const fn = ref('');
const fullname = 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 将自动计算获得。但如果使用的时监听器，你需要同时给姓、名、全名正确的初始值。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 从入门到项目实战 - Vue 计算属性用法解析
本文地址： https://pptw.com/jishu/297185.html