关于vue中计算属性computed的详细讲解
更新时间：2022年07月10日 09:56:21 作者：alical
computed是vue的配置选项,它的值是一个对象,其中可定义多个计算属性,每个计算属性就是一个函数,下面这篇文章主要给大家介绍了关于vue中计算属性computed的详细讲解,需要的朋友可以参考下
1.定义
computed是vue的计算属性，是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新
2.用法
一般情况下，computed默认使用的是getter属性
3.computed的响应式依赖(缓存)
1. computed的每一个计算属性都会被缓存起来，只要计算属性所依赖的属性发生变化，计算属性就会重新执行，视图也会更新。下面代码中，计算属性fullName，它依赖了firstName和lastName这两个属性，只要它们其中一个属性变化，fullName就会重新执行。
2.computed计算属性会被缓存，在下面代码中使用了两次fullName，但在控制台只输出了一次 “这是fullName”。
<template>
<div>
<div>
姓：<input type="text" v-model="firstName" />
</div>
<div>
名：<input type="text" v-model="lastName" />
</div>
<!-- 调用两次fullName -->
<div>姓名：{{ fullName }}</div>
<div>姓名：{{ fullName }}</div>
</div>
</template>
<script>
export default {
data() {
return {
firstName: "张",
lastName: "三",
};
},
computed: {
fullName() {
console.log("这是fullName");
return this.firstName + this.lastName;
}
}
};
</script>
4.应用场景
当一个数据受多个数据影响时，可以使用computed
1.本组件计算
2.计算props的值
3.计算vuex的state或者getters值的变化
附：计算属性的 getter 与 setter
默认情况下，计算属性函数是一个 getter 函数，如果计算属性只有 get 需求，则可以简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<!-- <input type="checkbox" v-model='isAll'> -->
<input type="text" v-model='n'>
+
<input type="text" v-model='m'>
=
<input type="text" v-model='x'>
</div>
{{o}}
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
is: true,
obj: {
// a: 1
a: 1
},
n: '',
m: ''
},
computed: {
//计算属性在这里写的属性不要在data重复写 跟data中的数据一样可以通过vm.获取或者修改
isAll: {
get() {
//只要获取这个属性就会触发get这个函数
console.log(1);
return this.is
},
set(val) {
// val 设置的值
this.isAll = this.is
}
},
x: {
// 只要是依赖的值（必须有setter和getter响应的数据）发生改变了就会重新计算自己的值
get() {
return Number(this.n) + Number(this.m)
},
// set(){
// Number(this.n) + Number(this.m)
// }
},
o: {
get() {
//如果没有在data的obj中初始化 就没有getter和setter响应 当改变this.obj.a的时候不会影响 数据o
return this.obj.a + 1
}
},
ss: {
get() { },
//计算属性必须要有get可以没有set
//v-model绑定的计算属性有get和set
//其他的一般只有get
set() { }
},
xx() {
//如果这个计算属性只有get可以写成一个函数的形式
},
bb() {
//第一次获取的时候依赖值没有发生改变但是也会默认执行一次
// 必须要有return 不支持异步
let a = 'kk';
setTimeout(() => {
a = this.aa + a
}, 1000)
console.log(a);
return this.aa
}
}
})
</script>
</body>
</html>参考：https://cn.vuejs.org/v2/guide/computed.html
https://segmentfault.com/a/110000012948175
总结
到此这篇关于vue中计算属性computed的详细讲解的文章就介绍到这了,更多相关vue计算属性computed内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vuex数据持久化可以很好的解决全局状态管理,当刷新后数据会消失,这是我们不愿意看到的。这篇文章主要给大家介绍了关于Vuex数据持久化实现的思路与代码，需要的朋友可以参考下2021-05-05
这篇文章主要介绍了vue.js使用watch监听路由变化的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
这篇文章主要介绍了npm install报错缺少python问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
springboot+vue+对接支付宝接口+二维码扫描支付功能（沙箱环境）
这篇文章主要介绍了springboot+vue+对接支付宝接口+二维码扫描支付（沙箱环境）,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
这篇文章主要介绍了Vue中的Ajax 配置代理 slot插槽的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue下如何利用canvas实现在线图片标注，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家详细介绍了vue如何通过纯前端实现将页面导出为pdf和word文件,文中的示例代码讲解详细,有需要的小伙伴可以参考一下2024-01-01
vue中国城市选择器的使用教程(element-china-area-data)
这篇文章主要给大家介绍了关于vue中国城市选择器使用(element-china-area-data)的相关资料,使用element-china-area-data插件可以非常方便地实现省市县三级联动选择器,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了Vue2.0实现组件数据的双向绑定问题，非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-03-03
这篇文章主要为大家详细介绍了vue element-ui实现动态面包屑导航，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
最新评论