【Vue3】学习computed计算属性

💗💗💗欢迎来到我的博客,你将找到有关如何使用技术解决问题的文章,也会找到某个技术的学习路线。无论你是何种职业,我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章,也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互相学习和建立一个积极的社区。谢谢你的光临,让我们一起踏上这个知识之旅!

文章目录

🍀何为计算属性computed

在Vue中,计算属性computed是一种便捷的方式来声明基于其他属性计算的属性。它的特点是:基于它们的依赖进行缓存,只有在相关依赖发生改变时才会重新计算。这样可以避免不必要的计算,提高应用程序的性能。


🍀介绍计算属性computed

首先我们准备一下本节需要的案例,我们的目的是将姓和名,合二为一显示在span标签

html 复制代码
<template>
  <div class="person">
    姓:<input type="text" > <br>
    名:<input type="text" > <br>
    全名:<span>***</span> <br>
</div>
 </template>
 
 <script lang="ts" setup name="Person11">
  

 </script>
 
 <style scoped>
   .person {
     background-color: skyblue;
     box-shadow: 0 0 10px;
     border-radius: 10px;
     padding: 20px;
   }
   button {
     margin: 0 5px;
   }
 </style>

运行结果如下

接下来我们补全一下数据,这里使用ref作为响应对象

html 复制代码
 <script lang="ts" setup name="Person11">
    import {ref} from 'vue'

    let firstName = ref('zhang')
    let lastName = ref('san')

 </script>

接下来我们引入一个知识点v-model

使用v-model指令可以简化表单数据的处理,使得开发者无需手动监听表单控件的变化事件并更新数据,而是直接通过绑定数据的方式实现数据的双向绑定,提高了开发效率和代码可维护性。

同时我们在span标签中加入这两个数数据

html 复制代码
  <div class="person">
    姓:<input type="text" v-model="firstName"> <br>
    名:<input type="text" v-model="lastName"> <br>
    全名:<span>{{ firstName }}{{ lastName }}</span> <br>
</div>

运行结果

其实结果就是我们之前想要的,但是这并不使用大部分情况,因为如果做改动的话,过于麻烦,不便于维护,所以我们引入了本节的知识点,接下来我们上正菜~


首先我们介绍一下语法

下面这是导入

html 复制代码
 import {ref,computed} from 'vue'

接下来我们定义一下计算属性fullName

html 复制代码
let fullName = computed(()=>{
    
      return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    
    })

并且别忘了这里改一下

html 复制代码
全名:<span>{{ fullName }}</span> <br>

运行结果

前面定义的计算属性是只读了,如果问为啥,我解释一下,那是因为之前我们是通过修改姓和名,之后这个值传到了fullName,而并不是对fullName直接修改。接下来我们定义一个按钮,同时添加一个方法

html 复制代码
<template>
  <div class="person">
    姓:<input type="text" v-model="firstName"> <br>
    名:<input type="text" v-model="lastName"> <br>
    全名:<span>{{ fullName }}</span> <br>
    <button @click="changeFullName">将全名改为馒头</button> <br>
</div>
 </template>
 
 <script lang="ts" setup name="Person11">
    import {ref,computed} from 'vue'

    let firstName = ref('李')
    let lastName = ref('小馒')
    let fullName = computed(()=>{
    
      return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    
    })
    function changeFullName(){
      
    fullName.value = 'li-si'
  }
 </script>

很不幸爆红了

接下来我们引入一对方法get和set,大家应该并不陌生

html 复制代码
<template>
  <div class="person">
    姓:<input type="text" v-model="firstName"> <br>
    名:<input type="text" v-model="lastName"> <br>
    全名:<span>{{ fullName }}</span> <br>
    <button @click="changeFullName">将全名改为馒头</button> <br>
</div>
 </template>
 
 <script lang="ts" setup name="Person11">
    import {ref,computed} from 'vue'

    let firstName = ref('李')
    let lastName = ref('小馒')
    let fullName = computed({
    get(){
      return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    },

    set(val){
      const [str1,str2] = val.split('-')  //以-分割分别赋值
      firstName.value = str1
      lastName.value = str2
    }
  })
    function changeFullName(){
      
    fullName.value = '李-馒头'
  }
   </script>

运行如下

这样我们就可以实现了修改fullName,将其变为可读可写


🍀计算属性computed的优势

计算属性computed在Vue3中具有以下优势:

复制代码
简洁高效:通过计算属性computed可以简洁高效地实现基于其他属性计算的属性,避免了重复计算和代码冗余。
响应式更新:计算属性computed会自动响应依赖的变化而更新,保持界面和数据的同步。
缓存机制:计算属性computed会缓存计算结果,只有在相关依赖发生改变时才会重新计算,提高了性能和效率。

🍀总结

通过本文的介绍,我们了解了Vue3中计算属性computed的用法、特性和优势。计算属性computed作为Vue3中一个重要的特性,可以帮助开发者更好地管理和维护应用程序的状态,提高开发效率和用户体验。谢谢观看~

挑战与创造都是很痛苦的,但是很充实。

相关推荐
weixin-a1530030831614 分钟前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
sealaugh3239 分钟前
aws(学习笔记第四十八课) appsync-graphql-dynamodb
笔记·学习·aws
ai小鬼头40 分钟前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's1 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
水木兰亭1 小时前
数据结构之——树及树的存储
数据结构·c++·学习·算法
一只叫煤球的猫1 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
鱼摆摆拜拜1 小时前
第 3 章:神经网络如何学习
人工智能·神经网络·学习
vvilkim1 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim1 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心2 小时前
vben 之 axios 封装
前端·javascript·学习