Vue3 计算属性的用法详解
上一篇博文说了 vue3 项目的 toRefs 函数和 toRef 函数，今天就稍微总结一下 vue3 的计算属性，其实学过 vue2 的宝子们应该都清楚，计算属性这个东西在项目开发过程中使用的还是比较频繁的，使用频率相对来说比较高，所以说咱今天稍微总结一下 vue3 项目中的计算属性，下面开始。
computed 计算属性说明
computed 表示计算属性，通常的作用是用来进行数据处理，方便在末班中简化书写。
比如日常在模板中我们渲染数据的时候一般是使用 {{ }} 来进行展示数据，但是有的时候嘞，获取到的数据并不是我们想要的类型，我们可以在 {{ }} 中编写表达式转换成我们需要的类型，但是呢，这样做简单的还可以，如果相对复杂的格式在 {{ }} 中编写的话就会造成模板代码繁琐，不易维护和阅读，所以这并不是最好的编码习惯，因此，vue3 也为我们提供了一些好的解决方案，计算属性就是其中一种。
计算属性可以帮我们将数据转换成需要展示的数据格式，不必在模板中编写大量的表达式进行处理。
计算属性使用
首先呢，使用 computed 需要引入。
import { computed } from 'vue'
引入这一个步骤是不可或缺的。
然后我们编写一个案例，就是一个页面有两个输入框，第一个输入框的数 加上 第二个输入框的数，使用计算属性在第三个输入框求和。
<template>
<div>
<h1>computed 计算属性</h1>
<el-input v-model="num1" /> +
<el-input v-model="num2" /> =
<el-input v-model="num3" />
</div>
</template>
<script>
import { computed, ref } from 'vue'
export default {
setup() {
const num1 = ref('')
const num2 = ref('')
const num3 = computed(() => {
return Number(num1.value) + Number(num2.value)
})
return { num1, num2, num3 }
}
}
</script>
<style scoped>
.el-input {
width: 100px;
}
</style>
保存刷新，输如前两个输入框的值，会自动计算和展示在第三个输入框。
这样就实现了最简单的计算属性。
计算属性不是只可以写一个的，可以写任意多个计算属性，怎么操作呢？看代码：
<template>
<div>
<h1>computed 计算属性</h1>
<el-input v-model="num1" /> +
<el-input v-model="num2" /> =
<el-input v-model="num3" />
<hr>
<el-input v-model="num1" /> -
<el-input v-model="num2" /> =
<el-input v-model="num4" />
</div>
</template>
<script>
import { computed, reactive, toRefs } from 'vue'
export default {
setup() {
const num1 = ''
const num2 = ''
const all = reactive({ num1, num2 })
// 计算属性求和
const num3 = computed(() => {
return Number(all.num1) + Number(all.num2)
})
// 计算属性求差
const num4 = computed(() => {
return Number(all.num1) - Number(all.num2)
})
return { ...toRefs(all), num3, num4 }
}
}
</script>
<style scoped>
.el-input {
width: 100px;
}
</style>
保存刷新，我们看到除了求和，还可以求差。
这样的话，就实现了在一个页面实现多个计算属性的操作，完全不用写在一个计算属性里面进行判断处理，很灵活，当然了，有三个可以写三个，有四个可以写四个。
但是有一点需要注意！
如果我们直接修改计算属性的值会报一个错误！
比如我们有一个按钮，点击之后把 num4 修改为 10 。
function btn() {
console.log(num4)
num4.value = 10
}
我们可以看一下效果。
没错，他会有一个错误，这个意思都懂，就是计算属性是只读的不允许修改。
为什么呢？
总结： 如果传递给 computed 的是一个函数，那么这就是一个 getter 函数，我们只能获取它的值，而不能直接修改它。
那我需要修改计算属性的值，我们需要怎么操作呢？其实很简单，只需要传进去一个对象。
// 计算属性求和
const num3 = computed({
get: () => {
return Number(all.num1) + Number(all.num2)
},
set:(value) => {
console.log(value)
return all.num2 = Number(value) + 1
}
})
也就是说，计算属性传入一个对象， 包含get 和 set 函数， 就能实现创建一个可以修改的计算属性。
案例：
<template>
<div>
<h1>computed 计算属性</h1>
<el-input v-model="num1" /> +
<el-input v-model="num2" /> =
<el-input v-model="num3" />
<br>
<br>
<el-button type="primary" @click="btn">修改计算属性</el-button>
</div>
</template>
<script>
import { computed, reactive, toRefs } from 'vue'
export default {
setup() {
const num1 = ''
const num2 = ''
const all = reactive({ num1, num2 })
// 计算属性求和
const num3 = computed({
get: () => {
return Number(all.num1) + Number(all.num2)
},
set:(value) => {
console.log(value)
return all.num2 = Number(value) + 1
}
})
function btn() {
num3.value = '10'
}
return { ...toRefs(all), num3, btn }
}
}
</script>
<style scoped>
.el-input {
width: 100px;
}
</style>
点击按钮，把 num2 改成输入的数字 + 1，也就是11。
好的，这就实现了修改计算属性。
总结
- vue.3.0 中用于从vue 按需导入 computed 计算属性。
- 如果传入的是一个getter 函数， 会返回一个不允许修改的计算属性。
- 使用ref 创建一个响应式对象， 在模板中使用不用自动解套。 直接渲染使用。
- 传入一个对象， 包含get 和 set 函数， 就可以创建一个可以修改的计算属性。
- 只可以获取值，不允许修改值直接使用 computed 计算属性使用箭头函数。
- 既可以获取值， 也可以修改值， computed 计算属性中传入一个对象。 get 方法 和 set 方法。
注意
在 vue2 中，有一个叫做过滤器的家伙，从 vue3 开始，过滤器已经被移除，且不再进行支持。官方给的建议是用方法调用或计算属性来替换它们。
到此这篇关于Vue3 计算属性的用法详解的文章就介绍到这了,更多相关Vue3 计算属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
详解TypeScript+Vue 插件 vue-class-component的使用总结
这篇文章主要介绍了TypeScript+Vue 插件 vue-class-component的使用总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
最近开发项目是学校校内车辆超速方面的统计检测方面的系统,在开发过程中发现有个小功能,就是用户移动端添加车牌号,刚开始想着输入框,提交时正则效验一下格式,最后感觉不方便,所以就简单自己手写了一个H5车牌号软键盘,对vue车牌号输入框实现代码感兴趣的朋友一起看看吧2025-03-03
这篇文章主要介绍了vue更新数据却不渲染页面的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要给大家介绍了关于vue中常见的问题及解决方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
vue中input标签上传本地文件或图片后获取完整路径的解决方法
本文给大家介绍vue中input标签上传本地文件或图片后获取完整路径，如E:\medicineOfCH\stageImage\xxx.jpg，本文给大家分享完美解决方案，感兴趣的朋友跟随小编一起看看吧2023-04-04
Vue路由懒加载是一种优化技术,旨在减少应用程序的初始加载时间并提高性能,这篇文章给大家介绍vue路由懒加载的相关知识,感兴趣的朋友跟随小编一起看看吧2024-05-05
这篇文章主要介绍了vue-element的select下拉框赋值实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
本文将探讨 props 验证失败的常见原因,并提供解决方法,帮助开发者在 Vue 组件开发中避免这些问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-03-03
这篇文章主要介绍了vue.config.js文件使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
本文主要介绍了Vue实现PC端分辨率自适应的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
最新评论